Writing Modular CSS

Published Feb 25, 2016Last updated Jan 18, 2017
Writing Modular CSS

While CSS is a simple language, the more code you add to a project, the worse you feel about it - unless you have a structured way of writing your CSS.

The pitfalls when coding in CSS

1. Not distinguishing between the standard style and the exceptional style of different blocks
Usually, people start with the homepage, but the homepage is not the standard. It usually has a fancy search bar and a fancy hero unit which are not reused throughout the website.

2. Not separating the CSS into multiple files
When you start, the amount of code is manageable and you can fit everything in one file, but as your project grows, you gain technical debt by using just one file. It takes a bit more time do split the code but it's worth down the road.

3. Not noticing designer mistakes
Designers are not perfect - so don't code their designs pixel to pixel. Sometimes a block will have a bottom margin of 20px ... but other times you will notice that the margin is 21px. It's your job to create conventions for margins, font-sizes, colors, etc.

4. Not naming properly the classes
The first name that crosses someone's mind is related to how the element looks (.red-button). This is a common pitfall since that button can change down the road and you shouldn't change your class as well. A class should describe what it is not how it looks.

A simple way to structure your CSS

Here is the way I usually approach this issue.

  1. You should start with the standard styles, and then move to exceptional styles. For example, you must look through all the designs first to understand how a normal/standard button looks like. The homepage one is not the standard, neither the one in the navigation bar.
  2. After I know how the standard button looks and I've noticed all the states I can have for a button (primary button, danger button, etc), I try to come up with good names for each of them.
  3. When I see exceptions to the rule, I try to see if that exception is just for a specific section or page. If so, I will not make another class for it, Instead, I will treat it in the context where the element looks different than the standard one.

Just imagine an upside down pyramid with the following layers.

# CSS Layers
1 Components - base styles (typography, buttons. forms, etc)
2 Sections - a group of components
3 Layouts - a group of sections
4 Pages - specific code for a single page

I try to get as much code into the first layers, and as little code in the last layers. A good smell for my code is when the pages layer is empty - that means that I successfully manage to extract the styles that were generic to upper layers.

I hope it helps and make sure you know what are you best practices down in the comments bellow!

Discover and read more posts from Andrei Canta
get started
Enjoy this post?

Leave a like and comment for Andrei

Be the first to share your opinion

Get curated posts in your inbox

Read more posts to become a better developer