DEV Community

Habdul Hazeez
Habdul Hazeez

Posted on • Edited on

CSS Naming conventions

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 some developers don't consider CSS as a real programming language but that's beginning to change with the addition of CSS variables.

When you work on a small sized project you might not give a priority to your selector names or how your project is structured but if by any chance the project becomes bigger than you expect then you will have to keep track of your selectors and using a naming convention can make this easy.

Naming conventions can be considered as an advanced concept in CSS therefore we'll briefly talk about them and I'll leave you to chose based on personal preferences and the size or structure of your project.

Contrary to the tradition of this series this post is more of theory than code.


There are two things that can come to mind when you open your CSS codebase (after a long period of time) or that of another developer:

  1. WOW! this is cool
  2. Oh My God who wrote this?

If you taught of the first option then you are in luck as the developer already did some heavy lifting and the code should be easy to maintain or modify. But, if its the second option you'll have lot of work on your hands and there should be an indication that you'll rename some selectors and following a naming convention will at least (to some extent) prevent another developer from going through a mental exercise of coming up with meaningful selector names.

The following are naming conventions that you can employ:

  • BEM
  • SMACSS
  • ITCSS
  • OOCSS
  • AMCSS

BEM

BEM stands for Block Element Modifier and it is a methodology developed by the folks at yandex in the year 2009. The idea behind BEM is to divide the user interface into independent blocks.

Now, the following questions can pop into your head:

  • What is a block?
  • What is an element?
  • What is a modifier?

What is a block?

In BEM a block is an independent page component that can be reused represented by class attribute in HTML.

The block name should describe its purpose not what the element looks like nor how it behaves.

Take the code snippet below, the class selector clearly indicate its purpose is to notify the users:

.notification {
  color: #ffffff;
  background-color: #20b2aa; /* Light sea green */
}
Enter fullscreen mode Exit fullscreen mode

Then you can use it in your HTML as:

<div class="notification">
  <!--code here-->
</div>
Enter fullscreen mode Exit fullscreen mode

On the other hand the following is incorrect in BEM:

.green-text {
  /* code here */
}
Enter fullscreen mode Exit fullscreen mode

You can read more about blocks from the methodology.

What is an element?

An element is a composite part of a block that can't be used separately from it. You can think of an element like a mother—child relationship.

The element name is separated from the block with a double underscore (__).

Using our previous .notification example, we can add a header to our notification in the HTML as thus:

<div class="notification">
  <h1 class="notification__header"></h1>
</div>
Enter fullscreen mode Exit fullscreen mode

And the code in CSS will be:

.notification__header {
  /* code here */
}
Enter fullscreen mode Exit fullscreen mode

Read the guidelines for using elements.

What is a modifier?

A BEM modifier defines the appearance, state or behavior of a block element.

The modifier name is separated from the block or element name by a single underscore (_) and it can not be used alone as we'll demonstrate briefly.

We might need another variant of the notification to display a warning to the user, all we have to do is update the HTML as thus:

<div class="notification notification_warning">
  <h1 class="notification__header"></h1>
</div>
Enter fullscreen mode Exit fullscreen mode

And the CSS will be:

.notification_warning {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

Thanks to a comment from @gracesnow, they made it clear that you are likely to encounter the BEM modifier being used with a double hyphen (--) in most places therefore, you can write the BEM modifier in the HTML as thus:

<div class="notification notification--warning">
  <h1 class="notification__header"></h1>
</div>
Enter fullscreen mode Exit fullscreen mode

And the CSS:

.notification--warning {
  background-color: yellow;
}
Enter fullscreen mode Exit fullscreen mode

You should know that the double hyphen is an alternative option stated in the BEM methodology as I noted in the following comment:

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.

Firthermore, the following is incorrect in BEM:

<div class="notification_warning">
  <h1 class="notification__header"></h1>
</div>
Enter fullscreen mode Exit fullscreen mode

Read the guidelines for using modifiers.

When you decide to use BEM for your projects, the documentation should be your guide.

SMACSS

SMACSS stands for _Scalable and Modular Architecture for CSS, and it was created by Johnathan Snook.

SMACSS is about categorizing CSS rules into 5:

  1. Base
  2. Layout
  3. Module
  4. State
  5. Theme

Base rules

Base rules are the defaults, and they can include attribute selectors, pseudo-class selectors, child selectors or sibling selectors.

html {
  /*code here*/
}

div:hover {
  /*code here*/
}

[class^="my_selector"] {
  /* code here */
}
Enter fullscreen mode Exit fullscreen mode

Layout rules

Layout rules divide the page into sections e.g. header, footer e.t.c

Take a look at the following layout:

Holy grail layout

© CSS tricks

The resulting CSS rules can be:

#header {
  /*code here*/
}

#sidebar {
  /*code here*/
}

#main {
  /*code here*/
}

#footer {
  /*code here*/
}
Enter fullscreen mode Exit fullscreen mode

Module rules

Modules are the reusable modular part of design. They can include:

  • navigation bars
  • dialog boxes

State rules

State rules are ways to describe how the modules or layouts will look like when in a particular state.

A state can be any of the following:

  • collapsed
  • expanded
  • disabled

The CSS will then look like the following:

.is-disabled {
  cursor: not-allowed;
}

.collapsed {
  visibility: hidden;
}

.expanded {
  visibility: visible;
}
Enter fullscreen mode Exit fullscreen mode

You should know that these states can be toggled with JavaScript as we'll demonstrate later in the series.

Theme rules

Theme rules are similar to state rules in that they describe how modules or layouts might look.

This is just an introduction to SMACSS. I'll encourage you to read the book online if you ever intend to use it.

ITCSS

ITCSS stands for Inverted Triangle CSS and its main philosophy is to help you organize your project CSS files in such a way that you can better deal the cascade, selectors and specificity.

ITCSS is partially proprietary meaning no official specification or documentation exists just a homepage stating its creator.

OOCSS

OOCSS means Object-Oriented CSS and its purpose is to encourage code reuse and ultimately stylesheets that are easier to maintain.

OOCSS is centered around two main principles:

  • Separation of structure from skin
  • Separation of container and content

If you are interested in OOCSS you should read this introductory guide on Smashing Magazine.

AMCSS

AMCSS is short for Attribute Module for CSS and the whole idea is about using HTML attributes and their values rather than classes for styling elements.

[am-Button] {
  /* code here */
}

[am-Button~="primary"] {
  /* code for primary button here */
}
Enter fullscreen mode Exit fullscreen mode

From a beginner's perspective I consider this advanced. But if you are curious you can visit the project page

Another naming convention is SUIT CSS naming conventions which relies on structured class names and meaningful hyphens. Again I consider this advanced, but you can visit the project page for more information.



UPDATE: 10th, December 2019

Additional resource (I consider it advanced for a beginner):

Thanks to:


UPDATE: 13th, December 2019

Additional resource (advanced):

GitHub logo rstacruz / rscss

Reasonable System for CSS Stylesheet Structure

Viewing this from GitHub? Visit the website for the full experience. ricostacruz.com/rscss →

rscss

Styling CSS without losing your sanity

Reasonable System for CSS Stylesheet Structure.
A set of simple ideas to guide your process of building maintainable CSS.

Introduction

Any CSS greater than 1000 lines will get unwieldy. You'll eventually run into these common pitfalls:

  • "What does this class mean?"
  • "Is this class still being used?"
  • "If I make a new class green, will there be a clash?"

rscss is an attempt to make sense of all these. It is not a framework. It's simply a set of ideas to guide your process of building maintainable CSS for any modern website or application.

Let's get started by learning about components. Continue →


rscss © 2015+, Rico Sta. Cruz. Released under the MIT License.
Authored and maintained by Rico Sta. Cruz with help from contributors (list).

ricostacruz.com

Thanks to:


UPDATE: 23rd, January 2021

Article updated to state that: In most places you are likely to find the double hyphen (--) used as the BEM modifier.

Thanks to:


Our next topic is also more of theory, and it's about Writing Maintainable CSS.

Top comments (14)

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.