DEV Community

CSS Naming conventions

Habdul Hazeez on December 09, 2019

One of the difficult things in computer science and programming in general is naming things and naming things in CSS is no different even though so...
Collapse
 
johannesjo profile image
Johannes Millan • Edited

And of course, for the lazy and pragmatic, there is BumCSS!!!

Also there is BEVM, which is basically BEM but it doesn't suck.

Collapse
 
ziizium profile image
Habdul Hazeez

Thank you for the contribution.

Collapse
 
jubeiam profile image
Leszek Stęczniewski

BEM modifier is with double hyphen ex '--alert'

Collapse
 
ziizium profile image
Habdul Hazeez

According to the quick start guide on modifier:

The modifier name is separated from the block or element name by a single underscore (_).

Your example --alert is one of the Alternative naming schemes used in the BEM community know as Two Dashes style.

You can check the examples in the naming convention section of the methodology.

Collapse
 
gracesnow profile image
Grace Snow

I have used BEM at loads of work places and never once seen the single underscore used for a modifier, always double hyphen. So much easier to read too - you should add this option into your article I think as that's much more likely to be what people encounter

Thread Thread
 
ziizium profile image
Habdul Hazeez

Thank you, I'll update the article with your contribution.

Thread Thread
 
ziizium profile image
Habdul Hazeez

Updated.

Once again, thank you.

Collapse
 
good3n profile image
Tom Gooden✨

Elad Schecter has a great article on storytelling CSS class names which could make a great addition to this post.

Collapse
 
ziizium profile image
Habdul Hazeez

I have updated the article with the provided resource. Thank you.

Collapse
 
russellbishop profile image
Russell Bishop

Can't remember the name of the methodology, but:

.u-
Utility

.o-
Object

.c-
Component

Collapse
 
ziizium profile image
Habdul Hazeez

The ".u - Utility" is part of SUITCSS naming conventions.

The rest are discussed in Harry Roberts article from 2015 titled More transparent UI code with Namespaces specifically the namespaces section of the article.

Collapse
 
russellbishop profile image
Russell Bishop

Might be ITCSS from CSSWizardy?

Collapse
 
nards_paragas profile image
Nards Paragas

Just wanted to share this: RSCSS

Collapse
 
ziizium profile image
Habdul Hazeez

Thanks for the contribution. I updated the article with the provided resource.