Good CSS Rules
I'll tell you about my rules, which I use in any CSS file.
Why do you need it? First, your CSS file will be easier to read and understand. Secondly, a good writing style is always a plus. And thirdly, it makes life much easier.
')
1. Everything must be absolutely valid. I try to avoid even warning'ov.
You need to get used to the quality, valid code. This is much more aesthetically pleasing and more useful than a dirty "how-gone".
2. Try to comment as much as possible.
Even obvious things will not interfere with comments. For example, before the block header, I write / * Cap * /, before footer / * Basement * /. It seems obvious, but glimpsing the code, catch the eye is much easier, especially if the style file is divided into logical blocks. But overdoing is also not worth it.
3. Split the file into logical blocks.
Each logical block from the other is separated by an empty line. The blocks go in a logical order, first preparation (CSS reset and other trifles), then the body block, followed by the settings blocks of the main components (links, paragraphs, headers, etc.).
With the help of blocks and comments, browsing and finding something in the style file becomes incredibly convenient and simple.
4. Sort the CSS properties alphabetically.
At first, it is a little difficult, especially for those who are not very familiar with the English alphabet. But later you get used to it and already automatically write properties alphabetically. Insanely simplifies editing.
5. Use a hierarchy.
Hierarchy is quite a convenient thing. For example, there is a heading in which 2 blocks are embedded, it will be very pleasant for the eye to describe these blocks in a hierarchical order:
6. Use 2 writing styles, short and long:
If there are very few properties, then why write a long block? Simplify both reading and file size styles.
7. Decide on your writing style.
For example, I use tabs for indentation, to create a hierarchy of 2 spaces. For each property, I set the value after the space (text-align: center;)
8. Be sure to use CSS Reset.
Putting patches (crutches) under different browsers is no longer fashionable. IE6 officially died. Most of everything can be validated using CSS Reset.
I hope my advice will help you. Do you use any rules? Do you have comments or additions? Write in the comments, I will be glad to hear your opinion :)
Why do you need it? First, your CSS file will be easier to read and understand. Secondly, a good writing style is always a plus. And thirdly, it makes life much easier.
')
1. Everything must be absolutely valid. I try to avoid even warning'ov.
You need to get used to the quality, valid code. This is much more aesthetically pleasing and more useful than a dirty "how-gone".
2. Try to comment as much as possible.
Even obvious things will not interfere with comments. For example, before the block header, I write / * Cap * /, before footer / * Basement * /. It seems obvious, but glimpsing the code, catch the eye is much easier, especially if the style file is divided into logical blocks. But overdoing is also not worth it.
3. Split the file into logical blocks.
Each logical block from the other is separated by an empty line. The blocks go in a logical order, first preparation (CSS reset and other trifles), then the body block, followed by the settings blocks of the main components (links, paragraphs, headers, etc.).
With the help of blocks and comments, browsing and finding something in the style file becomes incredibly convenient and simple.
4. Sort the CSS properties alphabetically.
At first, it is a little difficult, especially for those who are not very familiar with the English alphabet. But later you get used to it and already automatically write properties alphabetically. Insanely simplifies editing.
5. Use a hierarchy.
Hierarchy is quite a convenient thing. For example, there is a heading in which 2 blocks are embedded, it will be very pleasant for the eye to describe these blocks in a hierarchical order:
6. Use 2 writing styles, short and long:
If there are very few properties, then why write a long block? Simplify both reading and file size styles.
7. Decide on your writing style.
For example, I use tabs for indentation, to create a hierarchy of 2 spaces. For each property, I set the value after the space (text-align: center;)
8. Be sure to use CSS Reset.
Putting patches (crutches) under different browsers is no longer fashionable. IE6 officially died. Most of everything can be validated using CSS Reset.
I hope my advice will help you. Do you use any rules? Do you have comments or additions? Write in the comments, I will be glad to hear your opinion :)
Source: https://habr.com/ru/post/86770/
All Articles