Note: The following of course varies from site to site based on how design focused the site needs to be.

I had thought about writing some things about this, but I will put a quick observation here

>restrict yourself to using only markup-meaningful semantic tags, and then figure out CSS which works with the markup you have.

this used to be the best practice advice about 20 years ago. If you've been around long enough in programming, especially in web development, you will see cycles of best practice advice where the thing you were told as the best practice at one time becomes the worst practice later.

For example at one time it was considered "best practice" to put script tags at the head of the document.

Anyway this guy really isn't the person to give you best practice advice, as he notes.

The semantic tags advice is dear to my heart and I wish it were so, but it is wrong, unless the site you are working on is the online representation of a textbook or something highly structured like that, in which case it is spot on.

The reason why it is wrong is that most of the web is a design focused medium, as opposed to a meaning focused medium. In a meaning focused medium the semantics are the most important thing, because semantics are how we convey meaning. That's pretty much tautological there.

In a design focused medium obviously semantics of things are important, but so is arbitrariness. To see that arbitrariness is important, pick up any highly visual magazine that has been applauded for its design aesthetic. Obviously no magazine is completely arbitrary but even more structured ones like The New Yorker need to do somewhat arbitrary things with the layout and design to enforce the rules of taste which guide it.

It is not impossible for a design focused publication that in moving between articles that the look of headlines change (although always recognizably headlines), the necessity of splitting things up with visually arresting details that delight the reader is common place, typography and images are there to delight the visual sense, not to clarify a point being made in the article, as a common rule.

If you were to try to semantically describe all these effects and things with meaningful class names you would end with lots of drivel, essentially, or things that mixed presentation description with semantics like ".ArtDecoHeading" perhaps, and that is because the difference in presentation of many of these things communicate absolutely not semantic value but only that it looks cool or nice or whatever way you want to describe the effect of design on the target of the design.

This relates to lots of CSS frameworks where the names of classes describe not what the element is or means, but rather what the class does, because when design affects are placed in a somewhat semi-arbitrarily manner this is really the most sensible way to describe a lot of classes.

Again, as nothing is completely arbitrary you will find things that are a mix of semantic classes like ".productTitle"

Semantics and Presentation mixed

".bigHeader"

and pure presentation that is trying its best to seem semantic somehow

".sideBoxSlideIn .upDownJumper"

I mean definitely you have to identify what parts of your application have semantic meaning, where the design will not arbitrarily affect them, such as .productTitle, but I believe in most modern web development much of what you will be doing is not semantic styling, but design styling.

And when you are doing design styling you might find you're creating layers and layers of wrapper elements, because making wrappers is often one of the easier ways to solve arbitrary layout problems.

On edit: this was partially prompted by the guy claiming never to have written production CSS and saying he is not really the person to be giving advice here, and I agree because he does not understand the actual needs of web development as a design based medium. Which is why he suggests such previous best practices as don't use classes and stuff like that which just doesn't work because to be able to do arbitrary layout without classes we would need to have millions of element types to play around with and then you have just recreated the problems with classes, only worse.

on edit2: added note at beginning.

It's also worth noting that semantic markup is not a feature of CSS, it is a feature of HTML. CSS has almost no power if something like a scraper or a reader mode chooses to ignore it. Of course that would be pandemonium and we would never get good results.

I feel like something in the CSS camp that could be highlighted in a "great idea, okay implementation, poor reception" that the OP is going for is print stylesheets. Those are incredibly underused.

My experience working with other peoples code is that they often use too many wrappers. I don't mind using some wrappers, often they're just necessary. But I'll often see components with like 4+ nested divs where half of them or more can just be removed with no visual change. Not to mention spans, some people just use spans for everything, it's all divs and spans.

Personally I like to try to use semantic HTML where possible, as it helps with a11y and is nicer to read and work with. But I don't mind using some container/wrapper divs to make things look right.