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

One very important thing to note is that browsers read CSS right-to-left, not left-to-right so if you structure your selectors few levels deep then it's more work for browsers to do.

.pageHeader .title {}
.leadArticle .title {}
.productPreview .product .title {}

So this is one .title but in a different context. Browser while rendering will check if the child element is placed inside of particular parent element and then it will apply corresponding rules.

.pageHeader-title {}
.leadArticle-title {}
.productPreview .product-title {}

Here we have 3 very different titles (not one!) so browser wont do any extra calculations nor checks if the child is a child of particular parent. What we have here is also more flat structure of modules which is always nice.

Always remember that nesting your selectors and naming them in the same way but in different context has impact on the performance which does not mean anything if you're writing small personal website but if you need to plan and deliver solution that will be viewed by millions then it's important to know how to properly structurize your markup.