Semantics before anything else

My first rule in styling websites or applications is to style semantics over anything else.

1. First use as much of the agreed upon tags and properties that the latest HTML spec gives you
2. Extend this with microformats or schema.org-vocabularies and what else you can find that is an (pseudo-)standard for semantic markup
3. Finally, if no matching semantically rich descriptors can be found, try to think of future proof names for your elements that may be reusable. Think “metadata div(vision)”, “(search) result” (you may style result here and add another more specific styling for search results).

Style the semantical markup. Semantics is about meaning, and by defining your content’s meaning in html and highlighting this meaning with your style brings you consistency from the start. This is not only nice to you as a maintainer of code, but also to your audience. It leads to consistent, predictable behaviors.

The counter movement is scoping it all in component attached css (thinking of web components or the trend to inlining css, either directly or using cryptic, automatically generated html classes and I’m even looking at excessive BEM), which forces designers to cross check all the applied styles deeply nested in a component. That’s not maintainable, its a mess made containable. Do not make exceptions the rule.

After having addressed the semantics, go ahead and continue with patterns like Object Oriented CSS or SMACSS. Another reference I’ve come to enjoy is The SASS way.

Update: This alistapart article resonates the same attitude towards styling.