Ten tips for organizing your css code
1. Insert the CSS reset
One of the biggest challenges when developing a website is cross-browser compatibility.
The CSS reset is a style sheet that greatly reduces these incompatibility errors by providing a general style that is defined but easily customisable.
Normalize.css is a modern and quite precise reset based on HTML 5.
https://necolas.github.io/normalize.css/
You should insert the style sheet for this CSS reset in the <head> section, before your style definitions.
2. Organise the elements
To be able to find your way around, you need to organise the elements of your style sheet. This means that the order should be logical.
You’ll start with the <body> elements, then the <header>, the <nav> and the <footer>
3. Respect the writing conventions for IDs and classes
It is important to name your IDs and classes correctly. In particular, they must :
=> Be durable
=> Clearly represent the element in question
For example, you should avoid naming a class « titre-bleu » because the day the title colour changes the class name will no longer represent the element.
4. Grouping IDs and Classes of the same component
If an HTML component has different IDs and classes it is better to group them in your CSS file. If there is an error you will be able to find it more easily.
For example, for a component with the class « flipcard » and two divs with the IDs « front » and « back » respectively, you would organise your code as follows:
5. Using the hexadecimal colour code
To give a colour to an element, you have two choices:
Either you use the name of the colour: color: green
Or you can use the hexadecimal code: color: #008000
It’s better to use hexadecimal code because it is 4 to 5 times faster to load than the colour name.
6. Use the CSS prefixes of the browsers
Each browser has its own specificities in terms of styles.
Since the arrival of CSS3, you must insert the vendor prefixes in your CSS sheet so that each browser takes into account the functionalities and styles that you implement. Without this, you may encounter errors.
Here is a list of the main vendor prefixes:
Chrome: -webkit-
Safari: -webkit-
iOS: -webkit-
Firefox: -moz-
Opera : -o-
7. Bringing information about the stylesheet
Over time, you will not be the only person to use the CSS you are working on.
It is therefore important to include the following information:
The author, THE URL, The name of the theme , A description, Tags
When someone else uses the file, they will be able to contact the creator for additional information.
8. Inserting comments and annotations
For a better organisation and to make it easier to find your way around, it is recommended to insert comments and annotations in your style sheet.
The comments can for example delimit the different parts and the annotations bring precisions on a particular style.
In case of an error, you will be able to quickly reach the concerned part in your file.
9. Compress the CSS file
Your CSS file can have an impact on the loading speed of the site because of line breaks, spaces, redundant styles, etc.
If you notice that the loading time is abnormal, compress your CSS file with the CSS Compressor tool for example.
10. Check and validate the CSS code
To check that your style sheet is well constructed you can use the W3C CSS validation service.
By using this tool you can also check for errors, which will save you a lot of time.
https://jigsaw.w3.org/css-validator/
