Table of Contents
Imagine your CSS loading faster than the team of Formula 1 engineers is able to work (the work pretty fast). Imagine your CSS to be more polished than the Apple store and better optimized than the factory of Tesla or Toyota. The CSS behind your website can sound like a beautiful symphony written by Mozart. Sounds like too good to be true? With some effort (or money) invested, you can get all the things above and more. Let’s discuss the benefits of CSS optimization and what can you do.
Why optimize CSS
I can come up with various different reasons why you should optimize the CSS code of your website or hire someone (like me) who can do it. From development side it is much easier to work on tidy and organized CSS than on pile of mess. The more people will get involved with the code, the bigger the mess will be. After certain amount of time, your website will be like morbidly obese old man – slow, full of crap and with high probability of collapse.
Imagine living with two or three people other in one small apartment. Everyone has different preferences, style and organization habit. However, you don’t want to bother them, or yourself, with creating any set of rules. It will start with something small like keys appearing on different places. One day you will return home and furniture will be completely reorganized, some may be gone or will be added. The same with the CSS.
You will hire one guy (or girl) to make a little change here or there. After a month you hire someone else to do another small modification. This will repeat couple times. One day you will notice your website is loading a bit longer or you will see some weird styles applied, so you take a look under the hood. You open the CSS files. Punch from Mike Tyson couldn’t be more devastating. The code is a mess, even to someone without coding background. Thousands of lines, half of them commented out, without any order. Rule over rule.
This problem is not only about individuals or small business, big companies are facing it too. I would even say these companies are in bigger danger than the rest of market. When you have a team for a front-end development, you must establish certain organization and style. Otherwise, the team will not be able to reach its potential and work as smooth and fast as it could. One way is to modularize your CSS – structure it to independent reusable modules.
CSS and BEM methodology
BEM methodology is something anyone can use to simplify the CSS structure and lower overall specificity. BEM stands for Block, Element and Modifier. Block represents the higher level of component. Element represents a descendent of Block. Finally, Modifier represents a different state or version of Block. The naming convention for CSS classes is pretty simple. Block is always used in the class name. Between Block and Element you will use two underscores, while between Block and Modifier you will use two hyphens.
CSS:
.block { … }
.block__element { … }
.block--modifier { … }
.nav { … } /* block */
.nav__link { … } /* element */
.nav--small { … } /* modifier */
The reason for using two underscores and hyphens is simple. You can find yourself in situation when you need to create two-word class name like header-link or btn-primary. You can use camel case – headerLink and btnPrimary – but this can get messy with complex or longer words. Hyphens make it clearer, faster to read and understand.
The BEM methodology can be a bit difficult to understand and start using. However, its benefits are much much bigger. Here is a great post about BEM and CSS on Smashing magazine. You don’t have to adopt the BEM methodology for your CSS right away or even at all. There are various modifications of it easier to learn and work with. For example, you can take a look at how Twitter approaches this with his Bootstrap framework.
HTML:
/* Simple form */ <form class="navbar-form navbar-left" role="search"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search"> </div> <button type="submit" class="btn btn-default">Submit</button> </form>
/* or a list group */ <ul class="list-group"> <li class="list-group-item">Cras justo odio</li> <li class="list-group-item">Dapibus ac facilisis in</li> <li class="list-group-item">Morbi leo risus</li> <li class="list-group-item">Porta ac consectetur ac</li> <li class="list-group-item">Vestibulum at eros</li> </ul>
This is also how I approach CSS naming convention in my work. It is much easier than working with pure BEM and it also requires less time to get comfortable with it. What’s more, if you are working with clients as a freelancer, it is much easier to create simple documentation and explain it to your client than classic BEM. You can go farther by using semantic classes to create CSS that will be very easy to understand for anyone even without programming background. For example, blog post can have following CSS.
CSS:
.post { … }
.post__heading { … } /* main heading */
.post__date { … } /* when it was posted */
.post__author { … } /* author of the post */
.post__img { … } /* featured image */
.post__content { … } /* paragraph */
You don’t have to take a look at the HTML or open the page in your browser to know what these classes relate to. Just by looking at the names you can associate them with individual posts on some blog page. With this setup, your client will also understand in a minute what elements in the post these classes influence. Another hidden benefit of this strategy is keeping the specificity very low. You are using only one CSS class selector through the whole code. No need for nested selectors or multiple classes.
Another example can be a site navigation with logo, couple links and some CTA button.
CSS:
.nav { … } /* this can be a nav element */
.nav__logo { … }
.nav__links { … } /* list of navigation links */
.nav__link { … } /* individual links */
.nav__link--disabled { … } /* disabled link */
.nav__button { … } /* or .nav-cta { … } */
.nav__button--blue { … } /* different style of button */
The same strategy applied to, let’s say, an image gallery containing images, titles, description and button to view more information can be following.
CSS:
.gallery { … } /* whole container */
.gallery__title { … } /* title for image */
.gallery__img { … } /* img element */
.gallery__description { … } /* or .gallery-info { … } */
.gallery__btn { … }
It is still simple and easy to understand even without looking on the live website or going through the HTML. The most important thing is that all of the CSS can be used as independent modules on different pages or in different sections without the need to re-write any rules. This will help you keep the CSS tidy and avoid creating duplicate rules.
Summary
Modularization of CSS can be tricky if you don’t know when to start or someone hired you to work with already created and populated stylesheet. There is also the question of having syntax or semantic classes. Some people can as well take a look at the examples above and say that it looks weird or ugly or that you are cluttering your HTML. They are right. It can be ugly and markup can easily get cluttered, but what is better for you, optimized and faster code or having as few classes as possible?
What naming conventions or system do you use for CSS in your work and projects? What do you think about BEM methodology?
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee 🙂
Become a Patron
