Posted in Frontend

Still writing that old clunky CSS?

CSS can be a bit tricky to wrap your head around, especially in larger projects. So let me share some of my experience that I have gathered through the years. There are a few basic starting rules, or rather thoughts that you can take with you in your work. These are as follows:

  1. Do not style ID’s
  2. Avoid nesting.
  3. Use proper naming conventions

Easy enough right? Let’s take a look at these thoughts.

Do not style ID’s

Oh boy, this seem to be a weird and controversial one for many people. But if you think about it, it is really simple, when do you have to be that specific? The answer is never. ID’s can only be used once per page and are impossible to override with classes. A class on the other hand can be used and extended as many times as you like. This is the essence of what we are trying to achieve with our CSS. Meaning, you should always strive to write scalable and reusable CSS. So stay clear of ID’s at all times. Use ID’s only as targets for your javascript.

So stop doing this!:

#main .wrapper { }

And start doing this:

.main { }
.wrapper { }

Avoid nesting

Nesting makes your selectors more specific and inefficient. And that is what we are trying to avoid. We should always strive to use the least number of selectors to style an element. For example:

This is bad:

.content-block { }
.content-block .content-block__title {}

Why? Because if we want to have a variant of that title, we need to nest the selector again:

.content-block { }
.content-block .content-block__title {}
.content-block .content-block__title--red {}

This is the way to do it:

.content-block { }
.content-block__title {}
.content-block__title--red {}

See how much cleaner and more reusable that is?

This is a hard thing for people to grasp in this age of preproccessors, wasn´t nesting one of the selling points of preproccessors? I often see this, nest gallore:

.main-header {
    .main-menu {
        ul {
            li {
                 a {  }
            }
        }
    }
}

Just because you can, doesn´t mean you should. Try overriding that ”a” element with a single class. This is what makes your CSS code ugly and clunky.  Have you ever taken a look at your compiled CSS? It´s not pretty.

Now, i´m not saying you should abandon nesting all together. Just think twice if it´s really needed before you do.

Use proper naming conventions

This is CSS, we do not camel case our selectors or any other fancy variations that you use in your regular coding language. Selectors are always written with hyphens and in lower case.

Do

.content-block
.main-menu
.blog-post

Do not

.contentBlock
.ContentBlock
.Content-block
.Content-Block

And yes, that goes for ID:s too.

The rule above is non negotiable. This next thing on the other hand is a personal preference, that have worked very well for me in the last year, and I do recommend picking it up in your every day workflow. I use a naming convention called BEM (block, element, modifier). You have already seen it in the nesting example above. It works like this:

  • Block, this is the root of the component
  • Element, this is a component that is part of the block
  • Modifier, this is a variant of a component within a block, or the block itself

Elements are written with double underscores (__). Modifiers are written with double hyphens (–). Let’s look at a example:

.news-list { }
.news-list__item { }
.news-list__item--sticky {}
.news-list__item--old {}
.news-item {}
.news-item__title {}
.news-item__title--large {}
.news-item__meta {}
.news-item__content {}
.news-item__content--old {}

See? Easy to read and understand, and our naming convention is handling the ”nesting” for us.

Of course there are more things you can do to improve your CSS, but that’s for another blog post. I will leave you with these three basic thoughts for now.

Leave a Reply