[hovertrain]

Consider the authors examples: The first example should really use extend or it will output the content of the news-item for each selector separately, and the news-item mixin contains many properties with static values that will be repeated. This example also couple the styles to the content, it should now only be used for news, this is not about premature optimization, but consistently working against code reuse, why cannot the authors beautiful blue box be used on something else then news. The alternative, the box-standard can be use multiple times and it is easy to understand and modify from the developer perspective and to anticipate the result (“what is breaking?”). Lastly why do author use the element (div) selector, the element selector is not necessary and it prevents author from writing it on section or article if that would semantically correct.

For the second example, yes, the example is extreme, and I do not see many people writing that many selectors, but the author is right that OOCSS will create multiple classes. Writing this box, I would probably have something like this: box box--special box--extra-padding. After the example the author argues that this is approach transfers the close coupling to the markup. Let us say we have a 100 pages and one style sheet, should the CSS really serve all those 100 pages or should each individual pages deal with one style sheet. With a 100 pages, it will be impossible to keep track of all the pages when you are writing your CSS.

From my perspective, the last example is legit, but element selectors with descendent selectors might cause performance issues, because every time the browser hits a link (a) it have to evaluate the hierarchy in the selector. Btw, the ul element selector is unnecessary.