6 Steps to Make Your CSS Code More Maintainable

6 STEPS TO MAKE YOUR CSS
CODE MORE MAINTAINABLE
FRONT-END DEVELOPER
MARTA
SZTYBOR

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.
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE

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

DECIDE
ON 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

DEAL
WITH 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 PREPROCESSORS
THE 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:
AVOID UNDOING STYLES

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:
AVOID UNDOING STYLES

DOCUMENT YOUR CODE
AND 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

THANK YOU FOR READING
FRONT-END DEVELOPER
MARTA
SZTYBOR

6 Steps to Make Your CSS Code More Maintainable

More Related Content

What's hot (20)

Viewers also liked (11)

Similar to 6 Steps to Make Your CSS Code More Maintainable (20)

Recently uploaded (20)

6 Steps to Make Your CSS Code More Maintainable