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