(Note: This is vastly simplified as I’ve only included sections and not the other sectioning elements like articles or asides. This is a more realistic, real life code sample.)

Ew. Maybe it’s time to ask your friendly neighborhood CSS preprocessor developer to implement :-moz-any()?

Thank you for writing this article because I did not fully understand the magnitude of the issue of styling heading elements. My implementations of HTML5 so far have used the old heading convention, ignoring the section h1 restart, due to my desire to avoid this issue. And you have presented the issue as far worse than I ever could have imagined, which makes me glad that I have avoided it thus far.

Your naming convention is brilliant. I love it and will implement in a future revision and use section/headings properly from here on out. Thank you for sharing.

I then kill all styles on the page verify the flow still works if I have to do something like: to maintain presentation without losing structure…

Thoughts?

So you mean that the relevance for search engines (SEO for the record) remains intact if I leave the headings inside the section tag?

The concept of “H1″..”H6″, born out early systems for printing large documents with consistency, is now only here so that machines can interpret these levels of importance (semantic mark-up), not humans. Of course, the utility of consistency remains for large documents as well, where the designer isn’t going to consider what the correct style for each and every heading should be (although, if it weren’t for the machine-reading advantage, we could just use classes). Good web-designers will of course adopt these semantic elements in their markup if they wish to serve their clients (or themselves) well, but CSS will allow them to continue to apply whatever styles they require for each usage of a heading. It is the CSS that allows the designer to modify the base styles as required as the content deems appropriate, adding contract and visual interest as required.

To a good web-designer, being DRY isn’t paramount, Communication is.

I can only ask myself, what is CSS for if not to apply styles to semantic markup?

With all this said, what could ever be wrong with something like this:

/* Default styles */
h1 { … }
h2 { … }
h3 { … }

/* SECTION.sidebar */
.sidebar h1 { … }
.sidebar h2 { … }
.sidebar h3 { … }
.sidebar h3.interest { … } /* alternate for visual interest */

/* SECTION.featured */
.featured h1 { … }
.featured h2 { … }
.featured h3 { … }

/* SECTION.featured ARTICLE.cover_story */
.cover_story h1 { … }
.cover_story h2 { … }
.cover_story h3 { … }
.cover_story h3.interest { … } /* alternate for visual interest */

/* SECTION ARTICLE.regular_column */
.regular_column h1 { … }
.regular_column h2 { … }
.regular_column h3 { … }
.regular_column h3.interest { … } /* alternate for visual interest */

According to a DRY-über-alles mentality, this is all wrong (and CSSLint will make that plain), but I doubt many COMMUNICATORS would agree.

Also, as a side note, I think embedding SECTIONs within SECTIONs would be a rather rare thing when actually used semantically correctly, requiring a very complex document indeed. Anything greater than 2 levels of nested SECTIONs would be met by very dubious eyes from me (I think we agree on this one).

As both you and John Allsopp said, styling section and article tags is fine, as long as the tag itself is being used appropriately.

Frankly, all the earliest materials I read about div made it sound pretty much like a section. It was a generic container, certainly, but one that was provided to surround related content and provide bolt-on semantics via classes where semantics were missing from HTML.

There were identical phrases used in the early days of div… such as ‘generic section of a document’, ‘division of a document’, ‘section of a document’, ‘structure hierarchy of divisions within a document,’ etc. Envision ouroboros…that’s how div became meaningless. People used it whenever they needed a block, or a place to hook a style, that fact created the reality, which meant the two went hand-in-hand more, which influenced the next spec, etc. Until we make up a new div and call it section.

I’ve had people get all huffy and try to explain to me that they’re COMPLETELY different, but it’s not convincing. They’re completely different right NOW. But that’s not what I’m talking about. I’m not contradicting the fact that div had both practically and also has officially become meaningless. I’m saying that if you compare the long ago then and now there’s not really a material difference between the two. Come knocking in 5 or so years, then we’ll see if history repeats itself.

I hope it won’t, but a few experiences I’ve recently had with coworkers creative ways of interpreting HTML5 has me feeling rather … skeptical.