Emmanuel Katto | What Goes Behind Writing a Flawless CSS Code?

Writing a clean and efficient CSS code is an art. There is a lot to learn in CSS like the properties, elements, attributes, values, and more to write a well-structured and standards-compliant code.

In reality, most developers don’t always get a chance to develop a project from scratch. Most of the time, they receive already written projects, and that’s when they realize the importance of a clean code. This is the reason, as a developer, you need to first understand the source code in order to proceed with the project. If the code isn’t written up to the mark, you will have to invest a lot more time than usual to get things done.

However, in order to write good CSS code, it is necessary to know how to start writing the codes in a better way. So, here are some expert-recommended tips to help you get started.

Start with a framework

It is recommended to use a CSS framework with each design, as it will speed up the production. Some designers have their own framework that they create over time, which helps them to maintain consistency within the projects.

However, this step is advisable only for the designers who already know HTML CSS coding. However, at some point, you have to create certain aspect of layout all by yourself and abrief understanding of CSS will help it get done easily.
CSS reset

Some designers may argue that using a CSS reset is an unnecessary step. But it helps in getting started with a clean base, making it easier to style your website with more predictable outcomes in the end.

It overrides the default styles of the browser. You can either use one of the many resets available online, a combination of the two, or even write one of your own.
Maintain consistency

Irrespective of the way you write your CSS code in HTML, or the way you add the properties, it is important to maintain consistency throughout the code. Many designers prefer to order their properties alphabetically, while many others use a logical approach, like organizing things by type or alignment. It’s entirely up to you about how you want to do it, but the bottom line is that you stick to the order so that it becomes easy to find things later.

You can also choose to develop your own sub-language of CSS that allows you to name things quickly. You can create certain classes for nearly every team and can use‌ the same name each time.
Ensure it’s readable

Another incredibly important aspect of writing flawless CSS code is to ensure that it’s readable. It makes it easier to maintain it in the future and to find elements within a matter of seconds.
Avoid the !important tag

!important tag has its place but many times designers use it in desperation when things are not looking right. The truth is that we need to use this tag on very few occasions.

The overuse of the !important tag creates the domino effect that turns into a maintenance nightmare soon.

This is what happens when a CSS code isn’t working as it is supposed to. Developers apply the important task to make it work. What happens here is, this tag offers the highest specificity to so many as compared to that actually required. When you do this, you command the browser to apply the rule under any circumstance. It does not turn out to be good because CSS rules differ from one selected to another or say parent selector to a child.

If you wish to override an important tag, you will have to use another important tag which leads to many more in the entire code. In the end, it will stuff your project code with important tags, which becomes harder to maintain. This is the reason ‌we recommend you to avoid the important tag as much as possible.
Keep it DRY

DRY or don’t repeat yourself is a general software development principle that aims to avoid or reduce repetition as much as possible in HTML CSS coding and also in other programming languages. To help you understand, here’s an example to point out the difference.

We will be creating 3 CSS classes for three buttons without using the DRY principle.

.primary-button {
  background: white;
  color: blue;
  border-radius: 10px;
  padding: 15px 25px;
  text-align: center;
  font-size: 15px;
}

.form-button {
  background: white;
  color: green;
  border-radius: 10px;
  padding: 15px 25px;
  text-align: center;
  font-size: 15px;
}

.cancel-button {
  background: white;
  color: red;
  border-radius: 10px;
  padding: 15px 25px;
  text-align: center;
  font-size: 15px;
}

Next, we will be creating the same buttons using the DRY principle.

.button {
  color: yellow;
  border-radius: 10px;
  padding: 16px 21px;
  text-align: center;
  font-size: 15px;
}

.primary-button {
  background: orange;
}

.form-button {
  background: blue;
}

.cancel-button {
  background: green;
}

You can notice that by applying the DRY principle, we have decreased the number of lines of the CSS code, thus reducing repetition and improving the performance and readability of the code.

The right usage of CSS shorthand

CSS shorthand allows you to set multiple properties of an element in a single line with which you ultimately save space. The entire code takes less time to load with it. But it shouldn’t be used everywhere, as it can disrupt the much-needed clarity required in the CSS code.

For instance: A div might have the following styles.

#crayon {
    margin-left:    10px;
    margin-right:   13px;
    margin-top: 15px;
}

These styles can be combined in one line like:

#crayon {
    margin: 9px 8px 0px 6px; // top, right, bottom, and left values, respectively.
}

Moreover, when you only need to set one or two properties or need to override something, longhand is a better choice to switch to. Another disadvantage of using shorthand code everywhere is that it will reset the ignored properties which will cause an undesirable effect.