CSS Code Style Rules
CSS Code Validity
Try to use valid CSS code.
Use valid CSS code unless dealing with CSS validator program errors or requiring proprietary syntax.
Use tools likeW3C CSS validatorto test validity.
Using valid CSS is an important quality measure. If you find CSS code that has no effect, delete it and ensure appropriate CSS usage.
ID and Class Naming
Give IDs and classes generic and meaningful names.
You should be able to tell what the element is for from its ID or class name, rather than superficial or vague naming.
You should prioritize naming based on the element's specific purpose, as this is easiest to understand and reduces updates.
Generic names can be added to elements where sibling elements are not special or have no individual meaning, such as generic names like "helpers".
Using functional or generic names reduces unnecessary document or template modifications.
/* 不推荐: 无意义 不易理解 */
#yee-1901 {}
/* 不推荐: 表达不具体 */
.button-green {}
.clear {}
/* 推荐: 明确详细 */
#gallery {}
#login {}
.video {}
/* 推荐: 通用 */
.aux {}
.alt {}
ID and Class Naming Style
When not necessary, ID and class names should be as short as possible.
Briefly convey what the ID or class is about.
In this way, the code is easy to understand and efficient.
/* 不推荐 */
#navigation {}
.atr {}
/* 推荐 */
#nav {}
.author {}
Type Selectors
Avoid using CSS type selectors.
When not necessary, do not combine element tag names with IDs or classes.
For performance considerations, avoid using ancestor nodes as selectors.performance reasons.
/* 不推荐 */
ul#example {}
div.error {}
/* 推荐 */
#example {}
.error {}
Property Shorthand
Use shorthand when writing property values.
Many CSS properties support shorthandshorthand(for example
font
)
Use shorthand as much as possible, even when setting only one value.
Using shorthand improves code efficiency and makes it easier to understand.
0 and Units
When not necessary,
0
do not add units after it.
margin: 0; padding: 0;
Decimals starting with 0
Omit the 0 before the decimal point for decimals starting with 0.
For values or lengths between -1 and 1, the 0 before the decimal
0
can be omitted.
font-size: .8em;
Quotes outside URIs
Omit quotes outside URIs.
Do not
url()
use quotes in (
""
,
''
) 。
Hexadecimal
Use 3 characters for hexadecimal whenever possible.
It is used when adding color values; using 3-character hexadecimal is shorter and more concise.
/* 不推荐 */ color: #EEBBCC; /* 推荐 */ color: #ebc;
Prefixes
Add a special application identifier prefix before selectors (optional).
In large projects, it is best to add an identifying prefix (namespace) before ID or class names, linked with a short dash.
Using namespaces can prevent naming conflicts and facilitate maintenance, such as in search and replace operations.
ID and Class Naming Delimiters
Separate multiple words in ID and class names with a short dash "-".
Do not use connectors other than the short dash "-" in selector names (including nothing at all), to improve understanding and lookup of names.
/* 不推荐：“demo”和“image”中间没加“-” */
.demoimage {}
/* 不推荐：用下划线“_”是屌丝的风格 */
.error_status {}
/* 推荐 */
#video-id {}
.ads-sample {}
Hacks
It is best to avoid damn CSS "hacks" — please first try other solutions.
Although it is tempting to use them as user-agent detection or special CSS filters, their behavior is too frequent and will long-term harm the project's efficiency and code management, so if other solutions can be used, find them.
CSS Code Format Rules
Declaration Order
Declare in alphabetical order.
Declaring everything in alphabetical order makes it easy to remember and maintain.
Ignore browser-specific prefix ordering, but multiple browser-specific prefixes for a certain CSS property should remain relatively ordered (e.g., -moz prefix before -webkit).
background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;
Code Block Indentation
Indent all content within code blocks (between "{}").
Indent allcode blockcontent, as it improves the clarity of the hierarchy.
Declaration Endings
All declarations must end with ";".
For consistency and extensibility, add a semicolon at the end of every declaration.
/* 不推荐 */
.test {
display: block;
height: 100px
}
/* 推荐 */
.test {
display: block;
height: 100px;
}
Property Name Endings
Add a space after the colon of the property name.
For consistency reasons, add a space between the property name and value (not between the property name and colon, mind you).
/* 不推荐 */
h3 {
font-weight:bold;
}
/* 推荐 */
h3 {
font-weight: bold;
}
Selector and Declaration Line Breaks
Separate selectors and declarations by lines.
Each selector and declaration should be on a new line.
/* 不推荐 */
a:focus, a:active {
position: relative; top: 1px;
}
/* 推荐 */
h1,
h2,
h3 {
font-weight: normal;
line-height: 1.2;
}
Rule Line Breaks
Each rule on its own line.
Leave a blank line between two rules.
html {
background: #fff;
}
body {
margin: auto;
width: 50%;
}
CSS Metadata Rules
Comments Section
Write comments by group. (Optional)
If possible, write unified comments for a group of stylesheets according to functional category. Put them on separate lines.
/* Header */
#adw-header {}
/* Footer */
#adw-footer {}
/* Gallery */
.adw-gallery {}
Rant Section
Adhere to the Consistency Principle
If you are going to edit code, spend a few minutes looking at its code style. If it does things a certain way, you should do the same.
With a unified style, there is an environment of common thinking, and participants can focus on what you are trying to say rather than first wondering what language from which planet you are speaking. Although we propose unified style rules here, it is only to let everyone know about them and learn from them to adjust their own style. Of course, maintaining your own unique style is also important. Balabala...