Hacker News Reader

Comment by csomar | Hacker News Reader

I don't agree with some points. For example, he mentions this to be a good practice

  /* Bad */
  .widget { }
  #sidebar .widget { }

  /* Good */
  .widget { }
  .widget-sidebar { }

In my opinion, it's best to use a "sidebar" class for the widget.

  .widget { }
  .widget.sidebar { }

Now, you might be worried that the "sidebar" class affects the widget in unwanted ways. Well, it shouldn't. That class should have generic/basic styling that anything in the sidebar should have.

Maybe you want to have special font styling for things in the sidebar. The ".widget.sidebar" is a special selector for a widget in the sidebar. You can also have the following

  .separator 
  .separator.sidebar 
  .separator.footer

That makes elements easier to maintain and debug. Well, just my opinion.

View on HN

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.

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. ;)

Reply on news.ycombinator.com