Clean Code
A better way to produce readable, understandable and maintainable code — Part 2
Intro
Hey there! if you click this article but haven’t read Part 1, you might wanna check the first part of this article about javascript, but if you wanna stick to read the clean code about CSS, without further due, let’s get started 5 general clean code tips about CSS!
Overview
CSS
- Don’ts
- Spacing
- Formatting
- Naming Convention (BEM)
- DRY! (Don’t Repeat Yourself)
Part 2: CSS Clean Code
Don’ts
let’s talk about the “don’t do it” things with CSS first:
- Avoid using HTML tags in CSS selectors
2. Don’t use ids in selector
3. Don’t nest more than 3 levels deep
nesting too deep, increasing specificity and harder to override
4. Don’t !important
what happened when you need to override a style that already use !important ? use have to use the !important again against it. that’s why don’t !important because it’s hard to maintain/override
5. Avoid shorthand properties, unless you need it
Spacing
got some confusion about when and where to use spacing in CSS?
- Four spaces for indenting code
2. Put spaces after : in property declarations
3. Put spaces before { in rule declarations
4. Write your CSS one line per property
5. Add a line break after } closing rule declarations
6. Place closing braces } on a new line
Formatting
here’s some formatting tips in CSS:
- use lower case separator, hyphen separated (spinal case)
2. Always prefer Sass’s double-slash // commenting, even for block comments
3. Avoid specifying units for zero values
4. Always add a semicolon to the end of a property/value declaration
5. Use leading zeros for decimal values
6. Put spaces before and after child selector
Naming Convention (BEM)
What? why we’re just talking about naming convention now after all? is it supposed to be the first thing to be discussed?
Well, all the examples above (the don’ts, spacing and formatting) are talking about general guide for writing CSS. so before we started to talk more specific thing like naming convention, i would like to share the big picture of writing CSS in general first.
So, talking about naming convention. surely there’s a lot of method/naming convention that used by various developer/engineer. but in this article, i would like to share and suggest one of CSS naming convention that i currently used on works.
yup, it’s BEM. well, it’s not gonna deep, yet i will share to you in a simple way. let’s check it out!
BEM: Block, Element, Modifier.
1. Block
in short, it’s the top-level abstraction of a new component. just imagine you got a card component (block)
2. Element
then, you got child items inside the block. let’s say you got a title (element) inside the card component (block)
hints: BEM notation for element is double underscore block__element
3. Modifier
and instead of having black title like the previous example, you might wanna use another colour variant of the title. lets create another variant of colour (modifier)
hints: BEM notation for modifier is double dash block__element--modifier
That’s it! simple right? now you may try the BEM naming convention on your own 😉
And maybe, you wanna go further about the prefix/namespaces on the BEM naming convention, you might wanna check this out: BEMIT: Taking the BEM Naming Convention a Step Further 🌈
DRY! (Don’t Repeat Yourself)
And last of all, another tips in CSS clean code is the DRY thing. be creative, don’t forget to group styles that contain the same rules 😄
Ending up the second part
(Another) Finally! it’s the end of clean code Part 2 (CSS).
Hopefully the second part of Clean Code article also helping you to understand about how to write a cleaner code in CSS. There’s still a lot of style guide about how to write a cleaner CSS, yet in this article, i’m surely cannot put it all, so you might also explore and find a lot more about CSS clean code apart from this article
To Wrap Up
Well, we’ve been talking a lot about JavaScript and CSS clean code. hopefully you could give it a try in your daily basis and produce a more readable, understandable and maintainable code.
Writing code using a style guide surely help you to get a cleaner code, but make sure to discuss with your team first since every problem has its own solution 😉