CSS Naming conventions
Tags: beginners, css
Published: 2019-12-09 17:17:37

---
title: CSS Naming conventions
published: true
description: A beginners guide to CSS naming conventions
tags: beginners,css
series: FrontEnd Development Zero to Hero
---
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](https://dev.to/ziizium/css-variables-1n72).

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 <b>more of theory than code</b>._

<hr>

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](https://en.bem.info/methodology/history/#lego-20-birth-of-bem). 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_:

```css
.notification {
  color: #ffffff;
  background-color: #20b2aa; /* Light sea green */
}
```

Then you can use it in your HTML as:

```html
<div class="notification">
  <!--code here-->
</div>
```

On the other hand the following is incorrect in __BEM__:

```css
.green-text {
  /* code here */
}
```

You can [read more about blocks](https://en.bem.info/methodology/quick-start/#block) 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&#x2014;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:

```html
<div class="notification">
  <h1 class="notification__header"></h1>
</div>
```

And the code in CSS will be:

```css
.notification__header {
  /* code here */
}
```

Read the [guidelines for using elements](https://en.bem.info/methodology/quick-start/#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:

```html
<div class="notification notification_warning">
  <h1 class="notification__header"></h1>
</div>
```

And the CSS will be:

```css
.notification_warning {
  background-color: yellow;
}
```
Thanks to a comment from [@gracesnow](https://dev.to/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:

```html
<div class="notification notification--warning">
  <h1 class="notification__header"></h1>
</div>
```
And the CSS:

```css
.notification--warning {
  background-color: yellow;
}
```

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

{% devcomment il2n %}

Firthermore, the following is incorrect in __BEM__:

```html
<div class="notification_warning">
  <h1 class="notification__header"></h1>
</div>
```

Read the [guidelines for using modifiers](https://en.bem.info/methodology/quick-start/#guidelines-for-using-modifiers).

_When you decide to use <b>BEM</b> for your projects, [the documentation](https://en.bem.info/methodology/quick-start/) should be your guide_.

###__SMACSS__

__SMACSS__ stands for _Scalable and Modular Architecture for CSS, and it was created by [Johnathan Snook](https://snook.ca).

__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](https://dev.to/ziizium/css-selectors-1ch3).

```css
html {
  /*code here*/
}

div:hover {
  /*code here*/
}

[class^="my_selector"] {
  /* code here */
}
```

####__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](https://thepracticaldev.s3.amazonaws.com/i/3crffan9rq6w08wzijs6.jpg)
<figcaption>&copy; <a href="https://css-tricks.com/books/volume-i/holy-grail-layout-5-lines-css/">CSS tricks</a></figcaption>

The resulting CSS rules can be:

```css
#header {
  /*code here*/
}

#sidebar {
  /*code here*/
}

#main {
  /*code here*/
}

#footer {
  /*code here*/
}
```

####__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:

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

.collapsed {
  visibility: hidden;
}

.expanded {
  visibility: visible;
}
```

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](http://smacss.com/book/) 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](https://itcss.io) 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](https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/).

###__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.

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

[am-Button~="primary"] {
  /* code for primary button here */
}
```

From a beginner's perspective I consider this advanced. But if you are curious you can [visit the project page](https://amcss.github.io/)

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](https://github.com/suitcss/suit/blob/master/doc/naming-conventions.md) for more information.

<hr>
__UPDATE: 10<sup>th</sup>, December 2019__

Additional resource (I consider it advanced for a beginner):
 
* [Storytelling CSS Class Names](https://medium.com/@elad/storytelling-css-class-names-887a78798f07)

Thanks to:

{% user good3n%}

<hr>

__UPDATE: 13<sup>th</sup>, December 2019__

Additional resource (advanced):

{% github rstacruz/rscss %}

Thanks to:

{% user nards_paragas %}

<hr>

__UPDATE: 23<sup>rd</sup>, 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:

{% user gracesnow %}

<hr>

Our next topic is also __more of theory,__ and it's about [_Writing Maintainable CSS_](https://dev.to/ziizium/writing-maintainable-css-5ge9).