3 ms·

There are a few reasons I prefer the namespaced modifier approach to what you've described: 1) This approach is more error prone and less predictable. For a on

There are a few reasons I prefer the namespaced modifier approach to what you've described: 1) This approach is more error prone and less predictable. For a one-man job it's probably OK, but on a team it's harder to guarantee someone else isn't going to apply some styles to `.sidebar`, which will cause unwanted styles to be applied to your separator component. The namespaced approach is very intentional, so it's unlikely someone will add styles to that rule without knowing exactly what they're affecting. 2) chaining like this ups the specificity of the CSS rule, which means your other modifier/presenter classes might not work on the element anymore. In CSS specificity is everything, and keeping it nice and low is usually preferable.

gibbitz 13y ago
Yeah but if my .widget-title rule refers to the title inside the widget .widget-sidebar seems like it should also be inside the widget, not a widget inside a sidebar. I appreciate the idea of predictable results but I find placing a widget in the sidebar styling it differently based on decendant selectors far more predictable than somehow guessing that I have to add another class to it. I'm less likely to research a site for a class I'm unaware of as an unknown unknown.That could be a deep rabbit hole. I see decendant selectors as the best practice here. If the problem is with sidebars being everywhere, make your selectors more specific for them. I found most of this article promoting magic markup. There's a logical conclusion to that approach which is creating a sass-like system to write embedded and inline styles. It would surely reduce http requests and remove cross site CSS bugs. ;)