Guidelines for Writing Super Readable CSS Code

When designers talk about style guides, they usually mean an agreed upon manual on the coherent look and feel of a website or an application, with a well-designed color scheme, typography, and UI that’s used across the whole project.
There is another type of style guide that can also be used in web development, and it is just as important but rarely discussed: style guides for the code itself. Code style guides are designers rather than developers, and their main objective is to optimize the CSS or other code.
The use of proper code style guides gives us a better organized, consistent code base, better readability of the code and more maintainable code. It’s not a coincidence that major technology companies like Google, AirBnB or Dropbox utilize them.

This blog presents 5 coding techniques which can dramatically improve management and simplify maintainability of your code.

1. Divide and conquer your code
First, look at the layout structure and identify the most important modules in your CSS code. Before starting coding, group common elements and title each group in separate sections. For example, you can choose Global Styles( body, paragraphs, lists, etc), layout, headings, text styles, navigation, forms, comments, and additional information. Select the appropriate flags or striking comments to clearly separate code fragments. However, this methodology probably won’t be sufficient for large projects where a single module is too large. In such cases, master stylesheets are used for importing groups. It is also helpful for large projects or large development teams to have a brief update log and some additional project information. In addition, you can include a CSS debugging code to take care of diagnostic styling if you run into a problem.

2. Define a table of contents
To keep an overview of the structure of your code, you might want to consider defining a table of contents at the beginning of your CSS-files.
Setting a table of contents makes it easier for others to read and understand your code. You can also print it out for large projects and have it in front of you when you read the code. This advantage should not be underestimated when working in a team. It can save you and your colleagues a lot of time.

3. Define your colors and typography
Since we do not yet have CSS constants, we need to find a way to quickly refer to the “variables “we use. One way to get around the lack of constants in CSS is to create some definitions at the top of your CSS file in comments, to define constants. A common use for this is to create a color glossary. It means that you have a quick reference to the colors used on the site to avoid using alternates by mistake and, if you need to change the colors, you have a quick list to go down and search and replace. ” The same applies to typography. You can also add some important notes to the “system “of your definitions.

4. Order CSS properties
When writing the code often it’s useful to apply some special formatting to order CSS properties — to make the code more readable, more structured and therefore more intuitive. Some developers use a more interesting approach — they group properties in alphabetical order. Whatever grouping format you are using, ensure you clearly define the format and the objective you need to accomplish. Your colleagues will thank you for your endeavors. Furthermore, you’ll say thanks to them for sticking to your format.

5. Indentation is your friend!
For a better overview of your code, you might consider using one-liners for brief fragments of code. This style could lead to messy results if you define more than 3 attributes for a particular selector. However, you can emphasize dependencies between all elements of the same class, which are moderately used. This technique increases the readability of the code dramatically if you find a specific element in your style sheet.

CSS style guides are helpful if and only if they are used properly. Avoid too many style guides for too many elements bundled in too many groups. Your objective is to obtain a readable and maintainable code. Stick to it and you’re going to save a lot of trouble.