loading...

CSS Naming conventions

ziizium profile image Habdul Hazeez Updated on ・5 min read

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 an 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;
}

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:

Holy grail layout

© CSS tricks

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 an 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 beginners 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:

good3n image

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. rscss.io →

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:

nards_paragas image

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

Posted on by:

ziizium profile

Habdul Hazeez

@ziizium

I teach and write code with interests in Web Development, Computer Security, and Artificial Intelligence.

Discussion

markdown guide
 

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

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

 

Thank you for the contribution.

 

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

 

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

 

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

.u-
Utility

.o-
Object

.c-
Component

 

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.

 
 
 

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

 

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

 

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.