Scalable CSS naming and sub classing

Question

If you have a div which has various elements inside it, what would be a good way to show relationships and hierarchy when it comes to writing the CSS rules for this HTML:

<div class="tweet-general-item">
<p>Some summary text in here</p>
</div>

I'm wondering how to write and apply a style for the <p> element. This could be done in two ways:

.tweet-general-item-summary {
  ...  
  font-size: 12px;
}

With HTML like this <p class="tweet-general-item-summary">Some summary text here</p>

OR

.tweet-general-item .summary {
  ...  
  font-size: 12px;
}

With HTML like this <p class="tweet-general-item summary">Some summary text here</p>

Which way would be better/scalable/good-practice and why? I have to be able to show some level of hierarchy/relationship in the CSS. I can't simply have a style of .summary by itself because it has no semantic meaning to anyone - the designers/devs need to know what kind of summary it is just from reading the CSS.

NCSS is a paper about CSS naming conventions: http://stackoverflow.com/questions/7927193/css-class-naming-convention/20253304#20253304 — Henry Ruhs, Jul 24 '15 at 20:02

score 2 · Accepted Answer · answered Nov 06 '14 at 17:38

2

Have a look at the BEM Methodology:

http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

https://bem.info/method/

Your example would look like:

<div class="tweet">
  <p class="tweet__summary"></p>
</div>

answered Nov 06 '14 at 17:38

Jens W

188
6

Scalable CSS naming and sub classing

1 Answers1