CSS trends with naming class and id with dash underscore?

Issue

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?

Solution

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

Answered By - Rasik