Comment by jasallen | Hacker News Reader

Comment by jasallen | Hacker News Reader

Parent Full thread

I disagree with this rule as phrased, though I agree with the examples: "MODIFYING COMPONENTS BASED ON WHO THEIR PARENTS ARE"

In the example there is a 'regular' version of widget and a couple 'special cases'. I think if it was treated as .mainContent>.widget{...} vs .sideBar>.widget the granularity and expectations are the same, you can still have a more generic .widget that sets common values. In general I think this is more readable and concise than having a .mainContentWidget and .sideBarWidget separately.

2c. :-)

I think the article suggests using modifiers instead. So rather than having

  .mainContentWidget {
    background-color: white;
    font-size: 1.5em;
    text-transform: uppercase;
  }
  .sideBarWidget {
    background-color: red;
    font-size: 1.5em;
    text-transform: uppercase;
  }

  <div class="mainContentWidget"></div>
  <div class="sideBarWidget"></div>

The article instead would suggest you do:

  .widget {
    background-color: white;
    font-size: 1.5em;
    text-transform: uppercase;
  }
  .widget-sidebar {
    background-color: red;
  }

  <div class="widget"></div>
  <div class="widget widget-sidebar"></div>

To address the bit about common values vs. special modifications. The implication is, although you might have to change some names, it's not context dependent. So if you decide that you want to put apply that same style to a widget in your footer ...and the header ...and this special case on a certain page landing page ...etc, then you just add the extra class to your HTML rather than adding a bunch of context dependent rules in the CSS.

Reply on news.ycombinator.com