mai-mohamed

Posted on Feb 11, 2021

CSS Clean Code

#css #cleancode #webdesign

“Clean code is a code that is written by someone who cares” — Michael Feathers

There are some points we need to pay attention to while writing CSS. Now I'm going to share some of the most important ones with you.
So let's take a tour...

1. Name things intelligently

The name of a selector should be self-descriptive and readable...
There are many naming conventions that you can use in your project like BEM (block element modifier) and others.

2. DRY

DRY stands for "Don't Repeat Yourself". As we can understand from its name, DRY aims to avoid repetition as much as possible.‌
For example,

.submit-btn {
  background: pink;
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}

.cancel-btn {
  background: gray;
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}

Here we can use the DRY principle by writing the common rules once in an additional class and the different rules each in other classes:

.btn{
  color: white;
  padding: 10px 30px;
  text-align: center;
  font-size: 18px;
  border-radius: 20px;
}
.submit-btn {
  background: pink;
}

.cancel-btn {
  background: gray;
}

3. Avoid the !important

p{
  font-size:18px !important
}

The !important tag has the highest specificity of all CSS selectors. If you need to override an important tag is to use another important tag. And this makes you use more and more important tags. which makes your CSS code much harder to maintain. So please don't use !important.

4. Use Shorthands

Without shorthands, CSS would look like this:

.btn{
  padding-left:20px;
  padding-right:20px;
  padding-top:10px;
  padding-bottom:10px;
}

Some of the CSS properties like paddings, margins, fonts, and borders can be written in a much simpler way by shorthand.
So we can write the previous example like this:

.btn{
  padding:10px 20px;
}

5. Don't Use Inline-Styles

According to the separation of concerns principle, CSS, and HTML should be separated for reasons like better readability and maintenance.
Another problem using inline-styles is that you need to use !important tag to override!!

6. Be Consistent

Writing clean HTML code isn’t always about choosing good practices and avoiding bad ones. Many times you can use different approaches to write the same line of code.
For example:

You can use a dash or underscore for ids and classes
You can use a single quote or double quote argument Just be consistent. When you find a specific practice that you like, stick to it and use it everywhere. Inconsistency makes your code extremely confusing for you and for the poor soul who has to read it.

7. Avoid Comments

“Don’t comment bad code. Rewrite it.” — Brian W. Kernighan

8. Avoid Overly Specific Selectors

Maintaining low specificity in your selectors is one of the keys to creating lightweight, reusable, and maintainable CSS. As you may recall on specificity, a type selector has the specificity 0,0,1. Class selectors, on the other hand, have a specificity of 0,1,0:

/* Specificity of 0,0,1 */
p {
  color: pink;
}

/* Specificity of 0,1,0 */
.color-light {
  color: pink;
}

When you add a class name to an element, the rules for that selector take precedence over more generic-type selector rules. There’s no need to further qualify a class selector by combining it with a type selector. Doing so increases the specificity of that selector and increases the overall file size.

Put differently, using p.color-light is unnecessarily specific because .color-light achieves the same goal. Another advantage is that .color-light can be reused with other elements. A p.color-light selector limits the .color-light class to p elements.

8. Don’t Chain Classes

Also, avoid chaining class selectors. Selectors such as .btn.submit have a specificity of 0,2,0. Higher specificity means they’re hard to override.

9. Avoid Using id Selectors

Because you can only have one element per id per document, rule sets that use id selectors are hard to repurpose.

Conclusion

These are some important tips that I can suggest for improving your CSS skills. If you have any questions, or you think there are also other tips for writing better CSS, don't hesitate to comment down below.

References

Top comments (5)

Micah Lindley • Feb 12 '21

One thing I disagree with: Avoid Comments. Comments are in the spec for a reason, and there's no reason NOT to use them. Yes, code should be relatively readable without them, and yes they should be removed in production, but commenting code is a very important practice that drastically aids collaboration efforts.

.. • Feb 13 '21

Agreed. You should include the "why" in your comments. Not the "what". Code itself should be enough to tell "what" it does, but sometimes it is a struggle to guess why (undocumented business requirements or a bug in IE11, etc)

Muhammad Hasnain • Jul 8 '21 • Edited

Robert C. Martin argues against this is book. If you have to write comments in order to explain your code, it is most likely that the code you wrote is already bad and has code smells. Code should describe comments rather than the other way around.

Although this doesn't mean you should avoid comments. Writing good comments is something anyone would recommend. For instance, documenting your code as in JSDocs or PHPDocs. You can use it to write "TODOs." Generally, low level operations should be abstracted away. You could comment the low level abstractions if it is complex but yeah.

There are no hard and fast rules. If you give your code to me and I understand it quickly (clean code) and can make modification in it without breaking anything (loosely coupled) then that's great!