SMACSS, Semantic Class Names and Nested Elements

Question

I\'ve just read Scalable and Modular Architecture for CSS and it\'s got me thinking about a few things. Snook\'s two principle tennets are:

1. Increase the se

Answer 1

I think there's very little to say about this. What you're doing is fine, though it's not the only approach to organizing your markup for CSS. The important thing to understand is that class names are not part of CSS, they're part of HTML.

So the classes applied to an element are not, in HTML terms, "namespaced" by their ancestors in the DOM tree, but stand in their own right. So it is reasonable that you use "title" for the class names of each of the elements in your example because they are all alike in being titles.

A contrary example would be to say use the class name of "note", where on one element it signals a type of comment, but on another element a musical note, and then assuming that their meanings can be distinguished by inspection of an ancestor element. That's not how HTML classes are supposed to work.

It's also work noting that there's nothing unsemantic about

. Use of element names in your CSS selectors is just another way of describing the relationship between the elements you want to style. .product h5 as a selector means "style fifth level headings in the context of the sub tree of the class 'product' like this ...". That's a different statement from .product .title which mean "style elements of class 'title' in the context of the sub tree of the class 'product' like this ...". Both statements are useful.