Learn: Write Clean and Maintainable CSS for Future Use

When it comes to write the CSS codes from scratch it can be time-consuming sometimes. Moreover, refactoring the codes from the apps that are already running. Not infrequently we have to read all the codes from it's beginning, only to implement some small changes.

To avoid wasting time on it, I will explain 5 important points that I have learned in writing CSS code to make it maintainable for our projects. Here are the points :

Avoid Unnecessary Id's 🙅‍♂️

First thing we have to know that the value of Id must be unique. It cannot be duplicate. In case, if we have different element with the same style, but we targeting the Id selector in CSS, we have to write the duplicate code for every different Id.

Yes, for some reasons, the use of Id is important when we interact with JavaScript DOM. But, we talk about using the Id for CSS selector in this post.

In addition, Id selector has a higher priority than Class selector which will make it difficult for us to change the style in the future. As we know that Class selector cannot override the Id selector because of it.

Also, we will naturally targeting the class if we want to style the elements.

Using The Class Selector is Highly Recommended 📝

The Class selector is preferred over the Id selector because of it's simplicity. It will lead us to write the code that are much more simple but still consistent.

One more thing to remember is that there's no need to over-specified with the Type selector that refer to a specific element. Here's the example :

div.card {
  background-color: blue;
}

Next time if we have a <span> with the same style, we can't apply that codes. Cause it targeting only for the <div>. It means we have to write the new duplicate codes which is not effective.

The Flattened Rule 🌗

The purpose of this rule is to write CSS code that is equally or not too specific. The goal is to avoid problems related to specificity. Please read the following CSS codes and notice the difference :

// code1
.card-title {
  font-size: 24px;
}

// code2
.card .card-header .card-title h4 {
  font-size: 24px;
}

When we write very specific code (like code 2), it will be difficult for us to trace the code if the code is already complex. That required more time when we need to override the styles.

!important Doesn't Really Important 🚫

The !important property is a special keyword in CSS to override any style regardless of its specificity.

Why is it better not to use it?

Refer to the previous problem, when the CSS codes are getting complex, and there's an element that already use the !important property, then we must use this keyword in order to be able to change the styles of the element. Otherwise, any styles will not be overwritten.

In short, there will be !important civilization.

But for the certain cases, for example when we use Bootstrap, there are several helper class which in practice use !important. Because the behavior of those helper classes is to get things done quickly.

Content Agnostic Concept 📚

Instead of focusing on the content, it's better to pay attention to the layout.

For example, if we have an article section and post section that turns out to have the same style. This will be more effective if we write the CSS code using a class for the base style. The purpose of writing the base class is for the layout. Later if we want to use it again, simply we can call the Class selector in the HTML code.

Those are 5 points about writing clean and maintainable CSS codes based on what I have learned. If you want to get a better explanation about it, here is the main source in Indonesian language :

Special thanks to Array ID for the useful knowledge!