Front-end developer Marta shares with you some tips which she finds most helpful, according to her experience.

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

3. 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

4. MODULARISE
YOUR STYLES
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE

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

6. DECIDE
ON A NAMING CONVENTION
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE

7. 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.
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
DECIDE ON A NAMING CONVENTION

8. DEAL
WITH SPECIFICITY
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE

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

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

11. USE PREPROCESSORS
THE RIGHT WAY
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE

12. 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.
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
USE PREPROCESSORS THE RIGHT WAY

13. Consider following HTML example:
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
USE PREPROCESSORS THE RIGHT WAY

14. It’s tempting to recreate this HTML structure in styles and write in SCSS:
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
USE PREPROCESSORS THE RIGHT WAY

15. 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:
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
USE PREPROCESSORS THE RIGHT WAY

16. 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.
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
USE PREPROCESSORS THE RIGHT WAY

17. AVOID
UNDOING STYLES
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE

18. CSS is about inheritance, so why undo values declared in
another selector?
Let’s have styles for headings:
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
AVOID UNDOING STYLES

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

20. DOCUMENT YOUR CODE
AND CREATE A STYLE GUIDE
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE

21. 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.
6 STEPS TO MAKE YOUR CSS CODE MORE MAINTAINABLE
DOCUMENT YOUR CODE AND CREATE A STYLE GUIDE

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

23. THANK YOU FOR READING
FRONT-END DEVELOPER
MARTA
SZTYBOR