6 steps to make your css code more maintainable

Mobile and Web developmentshop with offices in Warsaw

and Wrocław

6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE

FRONT-END DEVELOPER

MARTASZTYBOR

CSS is a fairly simple language to learn on a basic level and to kick off with the coding. But when your stylesheets start to grow, it becomes more and more difficult to untangle messed up classes.

Here I collected a couple of tips to help you write more manageable code. They’ll be useful no matter if you’re working on a project’s styles on your own or in a team.


MODULARISE YOUR STYLES


Begin treating your UI as a set of repeatable modules.

For most webpages it’s possible to break up the layout for smaller components, eg. header with navigation, footer, article, or even the smallest building blocks, eg. buttons and links.

Preprocessors give you the power to write stylesheets separately, and then @import them into the main file.


MODULARISE YOUR STYLES

DECIDEON A NAMING CONVENTION


Naming things is hard I’d say, especially if you try to name CSS classes.

Your first thought could be “Let’s name things semantically!”. Yeah, it’s perfectly right! When the graphic designer changes colours, you don’t want to grep HTML files to change .blue-box to .green-box (to say the least, there could also be a hundred classes named that way). So, you decide to choose to name things like .nav-main instead of .large-emerald-shiny-tabs.

But don’t hold on too tightly, the main point is to take the most sensible approach about naming classes as possible – all of the selector names don’t have to be semantic. Just follow a coherent convention and don’t use names describing an element’s appearance.


DECIDE ON A NAMING CONVENTION

DEALWITH SPECIFICITY


In general, try to stick to this simple rule of thumb: always try to use the least specific selectors as possible.

Very specific selectors, like

are hard to override.

In any case, when you have to code a similar element, but with slightly different styles, you would write a more specific selector, or even be tempted to use !important. This leads straight to hard-to-maintain code.


DEAL WITH SPECIFICITY

I would recommend using explicit selectors for an element, like classes:

It looks better, right? You should also avoid using IDs, because they are almost as specific as inline styles. They also have another drawback: they aren’t reusable, and this is something we really don’t want to have in our modular CSS.


DEAL WITH SPECIFICITY

USE PREPROCESSORSTHE RIGHT WAY


Preprocessors can really be a double-edged sword. They cannot guarantee you a clean, well-maintainable code if you don’t use their features properly.

You should avoid nesting CSS rules, unless it’s really necessary. This is probably the most common mistake made by beginners. Follow the inception rule:

Don’t go more than four levels deep.


USE PREPROCESSORS THE RIGHT WAY

Consider following HTML example:



It’s tempting to recreate this HTML structure in styles and write in SCSS:



It then compiles to:

If you needed a similar menu in another page, but with just a little tweaked color of the link, you’d have to override the last selector, and probably end up with this:



Not even this creates overly qualified selectors and causes problems with specificity. With tightly coupled HTML, it be-comes hard to maintain. When overused, it may cause per-formance problems and cause your stylesheets to grow in an uncontrolled manner.

Overly nested rules are also less readable.



AVOID UNDOING STYLES


CSS is about inheritance, so why undo values declared in another selector?

Let’s have styles for headings:




If styles are being resetted in

.header-no-border

class, why declare them for base class .heading? This would be a simpler and more maintainable way:


DOCUMENT YOUR CODEAND CREATE A STYLE GUIDE


CSS is a declarative language, so if you are using meaningful class names documenting code can seem unnecessary. But thinking about the future and other people who are or will be involved in your project, comments are an invaluable thing.

It’s worth to create your own or choose existing code guidelines, which include naming conventions, methodology used, commenting style and file structure. This will benefit all the people who ever touch the code.


DOCUMENT YOUR CODE AND CREATE A STYLE GUIDE

This presentation just scratches the surface. If you are interested in this topic, I can recommend you some excellent resources in the web, which cover the issues of modular CSS, code maintainability and various methodologies:

• Nicolle Sullivan’s Object Oriented CSS (OOCSS)• Jonathan Snook’s Scalable and Modular Architecture for CSS• Mark D. Otto’s code guide• Harry Roberts’ CSS Guidelines• Creating style guides on A List Apart


FURTHER READING

http://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

https://smacss.com/

http://codeguide.co/

http://cssguidelin.es/

http://alistapart.com/article/creating-style-guides

Mobile and Web developmentshop with offices in Warsaw

and Wrocław

THANK YOU FOR READING

FRONT-END DEVELOPER

MARTASZTYBOR

6 steps to make your css code more maintainable

Technology