What is Clean Code?

This term might have different meaning for developers. Although there are several best practices you can follow but there is no exact definition for clean code.

But for what I have learned and read, this is what a clean code is,

Clean code is code that is easy to understand, straightforward and consistent, therefore it would be reusable and refactorable.

This is important because as a developer, most of the time we will collaborate with other developers so we need to make sure that our code can be understood easily by everyone in team.
Now, let's take a look on what are the things we must do to write clean code in CSS.

1. Write Meaningful and Self Descriptive Name

You should use meaningful and self descriptive names. There are several naming conventions or methodologies that you can follow, such as BEM, OOCSS, SMACSS, Atomic CSS and many more.

2. Prefer CSS Preprocessor

By using CSS Preprocessor, it enables you to use things like variables, nested rules, inline imports, prefix, and more.
There are several CSS preprocessor, you can choose such as SASS, LESS, PostCSS etc.

CSS preprocessor is very handy when we are working with team and when our app grows bigger, and by combining with naming convention of your choice it can also help us to avoid repetition in our CSS.

3. Write Modular CSS

You should split your CSS files into modules for easier maintenance. If you are using SASS, you can follow the 7-1 pattern for the architecture.

4. Use Shorthand properties

Write your CSS in a simpler way using CSS shorthands, you can use shorthands for border, margin, padding, background, font etc.

For example, this is how we create border in CSS without shorthand properties

.border {
  border-width: 1px;
  border-style: solid;
  border-color: #aeaeae;
}

with shorthand, we can refactor into this

.border {
  border: 1px solid #aeaeae;
}

5. Write Flexible CSS Selectors

When writing CSS selectors, don’t make it overly specific, otherwise it would be hard to overwrite. You should maintain low specificity in your selectors.

• You can use element selectors (h1, h2, p) to write styling for your project's basic typography.
• Related to naming, plain css names are great for defining class with low specificity that intended for reusability. For example: .container, .shadow-md, .shadow-lg.

6. Avoid !important

It has the highest specificity of all CSS selectors, and if you want to override, you need another !important and another !important and another. This would make your CSS hard to maintain.
To avoid this, in any circumstances, please please avoid using !important as much as you can.

7. Follow CSS Styleguide

Aside from naming convention, there is CSS styleguide that could help you create maintainable CSS. The most famous one is Airbnb styleguide. It is recommended to combine their style guide with BEM or OOCSS.

8. Use Code Formatter Tool

You can use a code formatter tool called Prettier to help you auto format your code based on your team's preference. You can also integrate with linter, such as ESlint for bugs prevention.

Key Takeaways

Consistent on what you and your team has decided. And just like any other programming language, keep your code DRY (Don't Repeat Yourself) and KISS (Keep It Simple Stupid).

Reference

• https://dev.to/maimohamed/css-clean-code-5d3p
• https://www.sitepoint.com/golden-guidelines-for-writing-clean-css/
• https://levelup.gitconnected.com/writing-your-css-like-this-will-make-your-code-super-clean-f82d4bfeb468

Thanks for reading!
If you want to know more on Javascript clean code, you can head over to this article

Would really appreciate if you could share your thoughts and feedback in the comment ✨