CSS naming conventions

Naming convention is one of the most difficult activities of a developer. It helps to understand our code, and CSS is not an exception. Learning to think in objects is a helpful practice to improve the names of elements. I would like to talk about it in this article.

Introduction
Naming convention is all about learning to think in objects. Is important to know that objects are little chunk of functionality and all the elements of your website are objects: buttons, forms, the article content design, the title of a page, etc. If you are able to learn that, the 99% of the job will be done.
In general terms, the object is defined with a class name. In my opinion, the use of IDs and tag selectors can complicate things, the IDs can not be reused, and use tag selectors in your CSS is bad for performance. This article explains the problems of IDs.

A little example, written in SASS might be this:

Improving our knowledge with patterns
Take a look at this example, very common in projects:

The problem here is that you can not reuse the styles of .title because it only works inside .article. Remember that a title also is an object, and maybe in the future you can put it in another place. Or reuse the style in another section of your website.
It would be better written as:

The most important thing is that you are declaring childs of an article, instead of use nesting. I like putting a single dash to separate the object with its child.

Another valid pattern is to call the element inside an object as a singular noun. And the object might be the plural of it.
Take a look at the example:

You only have to pluralize the object parent.

Subclassing
The most common concept is subclassing, you can use it in CSS. For example you can extend the behavior of a button creating a form-button, login-button and comment-button. All are buttons, but they have own styles, for example:

You can declare the login button using this:

I prefer to name the subclass using the _subclass-object_ convention.

Object states
The objects can have states, for example, a button can be selected, actived, disabled. I like to use the SMACSS naming convetion, or rather, prefixing the state classes with is-. Here is an example:

The ampersand operator is a must here, because the state is only associate with the object.

Note that is-hidden is inside the button object, but it could be reused in another object. The best practice is to put general states outside the object.

Now, you can reuse is-hidden and is-disabledin other parts, and its names are correct.

File structure
Here is an example:

The convetion is to pluralize because each partial contains the definitions of different objects, with childs, subclasses, etc.

Conclusion
To resume, there is a list that might help you.

• Objects: Traditionally are nouns.

• Parent child: relationships are nouns:

• Subclasses: Often precedded by an adjective describing the type of object

• Modifiers: Are always adjectives