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:
- WOW! this is cool
- 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:
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:
- Base
- Layout
- Module
- State
- 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.
UPDATE: 10th, December 2019
Additional resource (I consider it advanced for a beginner):
Thanks to:
UPDATE: 13th, December 2019
Additional resource (advanced):
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).
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)
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.
BEM modifier is with double hyphen ex '--alert'
According to the quick start guide on modifier:
Your example
--alertis 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.
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
Thank you, I'll update the article with your contribution.
Updated.
Once again, thank you.
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.
Might be ITCSS from CSSWizardy?
Just wanted to share this: RSCSS
Thanks for the contribution. I updated the article with the provided resource.