Example Analysis of CSS Code style
This article mainly introduces the CSS code style example analysis, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let Xiaobian take you to understand.
CSS code style
Basic settings
2 space indent
UTF-8 coding
White space and format
Leave a space between the braces and the selector, a space after the colon, and a space before and after the comment.
Reason: it is said to be more beautiful this way.
/ * I am the comment * /
Div {/ * I am comment * /}
Span {
Color: red; / * I am the comment * /
}
It is not mandatory to write to the same line as the selector when there is only one style.
Reason: writing three lines takes up too much screen space.
Each line is written when there are multiple style declarations in a selector.
Reason: so that the error report can be accurate to the specific rules, easy to troubleshoot.
Multiple selectors are written on different lines when separated by commas, with curly braces on a separate line.
Reason: it is not easy to miss the selector after the comma when modifying.
Div
Span {
Color: red
Font-size: 12px
}
Each style declaration is followed by that semicolon.
Reason: it is easy to copy.
All outermost quotation marks are in double quotes.
Reason: consistent with HTML.
Multiple style values separated by commas are written in multiple lines.
Reason: easy to read and edit.
.block {
Box-shadow: 000 rgba (# 000,0.1)
1px 1px 0 rgba (# 000,0.2)
2px 2px 0 rgba (# 000,0.3)
3px 3px 0 rgba (# 000,0.4)
4px 4px 0 rgba (# 000,0.5)
}
Function limit
Avoid using ID selectors.
Reason: the weight is too high to maintain.
The use of @ import to import CSS files is prohibited. Reason: all kinds of tricks can not be explained.
Naming and modularization
Units with a value of 0 are recommended to be omitted, but not mandatory.
Reason: most zero units are useless.
Letters in hexadecimal color values are uniformly lowercase.
Reason: it's troublesome to change case.
All letters in the class name are lowercase.
Reason: it is not case-sensitive, does anyone want to unify uppercase?
Only letters, numbers, and "-" are used in class names.
Reason: if there is no limit, I am afraid that some monkeys will use Arabic.
.hello {} / * OK * /
.module-title {} / * OK * /
.panel-level1 {} / * OK * /
. Navigation bar / * Fuck * /
Thank you for reading this article carefully. I hope the article "sample Analysis of CSS Code style" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!
