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 */
}

Then you can use it in your HTML as:

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

On the other hand the following is incorrect in BEM:

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

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>

And the code in CSS will be:

.notification__header {
  /* code here */
}

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>

And the CSS will be:

.notification_warning {
  background-color: yellow;
}

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>

And the 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:

Habdul Hazeez • Dec 10 '19

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>

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 */
}

Layout rules

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

Take a look at the following layout:

The resulting CSS rules can be:

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

.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 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 */
}

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.

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

• Storytelling CSS Class Names

Thanks to:

Tom Gooden✨Follow

Insert pretentious crap about myself here.

UPDATE: 13^th, December 2019

Additional resource (advanced):

Thanks to:

Nards ParagasFollow

Currently in the Banking and Financial Services sector as a DevOps Engineer. Prior to my current role — I spent over 4 years working exclusively with early-stage tech startups in different industries

UPDATE: 23^rd, 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:

Grace SnowFollow

UX Designer and Front End dev in Liverpool, UK

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