CSS trends with naming class and id with dash underscore?

Question

I've been using dashes as a separator for css Class and ID names:

.about-us
.car-pricing-guide

I've seen sites use multiple underscores __

.home__content

Also, I've seen 2 dashes

.hero--title

I know it's a matter of preference but can someone point to articles or the though process for these kind of patterns? Is there a move towards a particular convention or is there a popular set of convention people seem to agree/follow?

Answer 1

The double underscore follows the BEM methodology. It is basically a way of naming classes so that later it becomes easy for the user to understand.

The guiding principle behind BEM seems to be "when designing a page, think in terms of reusable widgets". Which is pretty much the standard way you should be writing your semantic HTML.

Learn more about BEM here: BEM methoodology

Answer 2

I'm a huge advocate for using hyphens and it does seem to be more conventional. Long long ago some browsers didn't support underscores in class names and IDs, so hyphens were the preferred/standardized method. Even looking at CSS you see hyphens everywhere for things like border-color, so why not stick to the trend?

Hyphens also allow you to take advantage of things like the |= attribute. It lets you do nifty things like this:

span[class|="uppercase"] { text-transform: uppercase; }

Which results in both

<h1 class="uppercase-header">The Three Little Pigs</h1>

and

<h2 class="uppercase-subheader">Chapter 1</h2>

both getting the style text-transform: uppercase;

Now, I've never actually used this selector... but if I need to, my code is ready!

If you're still not a believer in hyphens, here are some more great examples as to why they're a great standard to stick to: http://jasonbuckboyer.com/playground/use-hyphens-in-css/