Having an orderly and clean code has many benefits: your web will load faster, you can modify it more easily or solve problems, it looks professional and most importantly, it will allow you to better identify the elements of your code and will also help some other developer to read it better and work better with him.
Today we will see a series of tips that can help you achieve a cleaner CSS code and have everything in order. Let’s see!
Create a table of contents
When you want to look for something specific in a book, what do you check first? Exactly, the index. Quickly find your IDs and classes by making a table of contents, for example:
/ * reset * /
/* general */
/ * typography * /
/ * header * /
/ * footer * /
/ * sidebar * /
/ * Home Page * /
/ * About Page * /
/ * Media Queries * /
Add IDs to the sections you create
Within the table of contents that you elaborated, you can add the ID that corresponds to each content and thus know which word you should identify when looking for that segment.
Comment the sections
When you start a section, add a short description that allows you to remember (and let you understand another programmer) what it is about.
Think of the layout
Having the layout planned in advance will let you know what you need in your code sheet, know the styles you will use and you can discard things along the way. When you plan on the fly you can fall into redundancy and repetition of unnecessary code.
Describe the IDs and classes
Did it ever happen to you in classes that because you do not write well or with more details, then you do not understand what you wrote down? Maybe when you are writing the CSS code you are very clear about everything or you are sure that you will remember everything, but it is possible that if you leave it and take it back later (at any time of the project, or after the web is finished), you should guess what an ID refers to or go testing until you find the item you need to modify. Try to be more specific by adding to the word the location or any detail that identifies it, such as #firstname instead of #name.
Don’t describe the IDs according to their position or color
Although we said in the previous step that you should be more descriptive with the IDs, do not elaborate this type of descriptions based on the position, color or some other detail of the web page that can be modified in the way, since this description will lose validity and you may have problems finding it.
Write your CSS as standard
Be in block form with each selector, property and value in a line, or in line with all the elements one after the other, make sure that if you copy the code from some side, do not have errors and all the elements are find in the correct order so that it doesn’t fail.
