Checking CSS code for best practices when mimicking

I'm currently looking to try learn CSS properly and I'm looking to recreate the following image using CSS:

Now I've managed to recreate the image (sort of) what I am looking to know though is based on my code what am I doing wrong/what would be the best practice. Many solutions fix a problem I want to know if my solution is reasonable.



is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's



Testing



Here is the CSS image:

Here is my CSS

Well, no, actually. That's your HTML - it just happens to have some style attributes. Which it shouldn't have.

So step one, separate CSS and HTML. Use a ` element in the element, or better yet, include the CSS from a separate file. Don't inline your styling.

But for experiment purposes, you could try re-making your code as a jsfiddle or jsbin (both for your own sake, and to make it easier for reviewers later). Put HTML in the HTML panel, and CSS in the CSS panel, and play around with it.

And you should be using more semantic (i.e. meaningful) markup. You have a lot of div elements, but a div is a purposefully meaningless element used mostly for grouping other, more specific, elements.

The point is that when just reading the HTML, I can't tell what it represents. It could be anything since it's almost all div elements. Yet in the picture I see things that should probably be links or buttons, headings or spans, and maybe forms and images.

Here's an analogy to illustrate the idea of "semantic markup": Imagine for a moment that you're writing a book: the HTML elements form your outline. Right now, that outline would say:

• Text

• Text

• Text

• Text

Ok, sure, a book consists of text, but that's not a very useful outline.

A more useful book outline would say something like

• Title

• Introduction

• Main body (likely divided into chapters or sections)

• Summary and conclusion

That's what HTML is meant to do: Mark up information so as to reveal and codify its structure. Hence, the tags you use matter a great deal. And it makes it easier to apply CSS, since you've now grouped content in a logical manner. You can style things based on what they are; headings, paragraphs, images, etc.. You want all your links to be red? Just change the style for a elements, and you're done. The HTML stays the same, since the links are still links - the CSS just makes them look different, but doesn't (shouldn't) change their meaning.

That said, there of course aren't pre-existing elements for everything you can think of, and often you want some headings to look one way, and other to look a different way, even though they're all headings. That's when class names and sometimes IDs come in, since they allow you to further specify things.

When I look at that first image, I see a structure (outline) like

div.dialog
header
img.thumbnail
h1
h2 (update: an h2 isn't really correct here, see comments)

div.body (maybe it's actually an image?)

footer
p
div.actions
a.favorite
a.share
form
button
button

I've given the containing element a dialog class, because it looks sort of like a dialog box to me. And yes, it's a div because there's no HTML element that captures the idea of a "dialog". That's when div comes in handy, since you can apply your own meaning (semantics) to it using an ID and/or a class name.

But it might not be a dialog box; it might be a cell in a grid view. In that case the class name should reflect that and be called grid-cell or something (update: actually, no it probably shouldn't - see comments). And perhaps the element should be an article. Again, pick an element and, if necessary, an ID and/or class name to describe what something is (not how it looks, or how it behaves).

Now, I'm not saying that the structure above is correct (as you can see, a few things have already been brought up in the comments), but that's how it mapped out in my head. If I were to start actually coding it, I'd probably end up changing a bunch of things.

For instance, footer` probably isn't quite the right element to use, since it really contains more important stuff. Yet is it the "body" then? I don't know, but you've got to start somewhere, and then iterate, iterate until the CSS and the HTML each look clean and semantic separately, and together produce the desired result.

I know I haven't actually tackled the styling you've written, but that's because I find that less important than getting the overall approach right first.

StackExchange Code Review Q#60623, answer score: 13