The Art of Naming: CSS Guide

I have heard lots of developers say they hate CSS. In my experience, this comes as a result of not taking the time to learn CSS. So here is my latest post, I'll tell you about a few naming conventions that will save you a bit of stress and countless hours down the line.

Why only CSS

CSS isn’t the prettiest language, but it has successfully powered the styling of the web for over 20 years now.

However, as you write more CSS, you quickly see one big downside. It is darn difficult to maintain CSS. Poorly written CSS will quickly turn into a nightmare.

Conventions To Use 👊

Use hyphen Delimited strings

• If you write a lot of JavaScript then writing variables in camel case is a common practice.

Eg:

var blueBox = document.getElementById('......')

This is correct, right?

The problem is that this type of naming is not well-suited to CSS.

.blueBox {
    border: 3px solid blue;
   }
/* Wrong way. Don't Do This */

.blue-box{
    border: 3px solid blue;
   }
/* Do This. The correct way*/

This is a pretty standard CSS naming convention.

Teams have different approaches to writing CSS selectors. Some teams use hyphen delimiters, while others prefer to use the more structured naming convention called BEM.

There are 3 problems that CSS naming conventions try to solve

• To know what selector does, just by looking at its name
• To have an idea where selector can be used by just looking at it
• To know the relationships between class names, just by looking at them

Have you ever seen class names written like this:

.nav--secondary{
      ....
    }

.nav__header{
      ....
   }
/* This is called BEM naming convention. */

Real-life explanation 😅👊

Today is John's first day at work.

He is handed over an HTML code that looks like this.

<div class="siteNavigation">
</div>

John realizes this may not be the best way to name things in CSS. So he goes ahead and refractors like the codebase like so.

<div class="site-navigation">
</div>

Poor John, he is unknown that he had broken the codebase 😩😩.

Somewhere in JavaScript code, there was a relationship with the previous class name, siteNavigation:

const nav = document.querySelector('siteNavigation')

So the change in the class name the nav variable became null.

So SAD 😩

To prevent cases as this Developer has come with some amazing and very different strategies.

Use

js-class

names

One way to mitigate such bugs is to use a js-* class name to denote a relationship with the DOM element in question.

for example:-

<div class="site-navigation js-site-navigation">
<div>

and in javascript code

const nav = document.query.Selector('.js-site-navigation')   

As a convention, anyone who sees the .js-site-navigation class name would understand that there is a relationship with that DOM element in the JavaScript code.

Some developer use data attributes as JavaScript hooks. This isn't right.

By definition, data attributes are used to store custom data.

If people use the

rel

This has nothing to do with name convention but will save your time too.

• You don't need to write a comment to say

  color: red;

  will give the colour as red. But, if you're using a CSS trick that is less obvious, feel free to write a comment.

Don't forget to get daily.dev extension.

Thanks For Reading.

Hope this article is helpful for you. 😁

Previously published at https://blog.rahulism.co/css-guide-the-art-of-naming