Here is a study guide for CSS code writing standards, including code comments, naming standards, space indentation, etc., which are all based on everyone’s usual conventions. It is definitely worth learning and reference. Friends who need it can refer to it. Next
1. Formatting code 1.1 File [Recommendation]: CSS files use UTF-8 encoding without BOM 1.2Indentation [Mandatory]: Use 4 spaces as an indentation level. 2 spaces or tab characters are not allowed.
.selector {
margin: 0;
padding: 0;
}
Copy after login
1.3 Spaces [Mandatory]: There must be a space between the selector and {.
.selector {
}
Copy after login
[Mandatory]: There must be a space between the selector and {.
margin: 0;
Copy after login
[Mandatory]: When the list attribute book is on a single line, it must be followed by a space
font-family: Aria, sans-serif;
Copy after login
1.4 Line length [Mandatory]: Each line must not exceed 120 characters, unless a single line is indivisible. [Recommendation]: For very long styles, it is recommended to wrap the style values at spaces or after , and to group them logically.
2. Selector and attribute abbreviation2.1 Selector
[Mandatory] If not necessary, it shall not be The id and class selectors are qualified by adding type selectors. Explanation: It has a certain impact on performance and maintainability. Example: css
/* good */
#error,
.danger-message {
font-color: #c00;
}
/* bad */
dialog#error,
p.danger-message {
font-color: #c00;
}
Copy after login
[Recommendation] The nesting level of the selector should be no more than 3 levels, and the qualification conditions at the rear should be as precise as possible.
Example:
/* good */
#username input {}
.comment .avatar {}
/* bad */
.page .header .login #username input {}
.comment p * {}
Copy after login
2.2 Attribute abbreviation [Recommendation] Where abbreviations can be used In this case, try to use attribute abbreviations. Example:
[Recommendation] When using abbreviations such as border / margin / padding, you should pay attention to the impact of the implicit value on the actual value. It is indeed necessary Use abbreviations only when setting values in multiple directions.
Explanation: Abbreviations such as border / margin / padding will set the values of multiple properties at the same time, and it is easy to override settings that do not need to be overridden. If some directions need to inherit values from other declarations, they should be set separately. Example:
[Mandatory] When the color value can be abbreviated, the abbreviated form must be used.
Example:
/* good */
.success {
background-color: #aca;
}
/* bad */
.success {
background-color: #aaccaa;
}
Copy after login
[Mandatory] Named color values are not allowed for color values.
Example:
/* good */
.success {
color: #90ee90;
}
/* bad */
.success {
color: lightgreen;
}
Copy after login
[Recommendation] Use lowercase letters for English characters in color values. If you don’t use lowercase letters, you need to ensure that they are consistent within the same project.
Example:
/* good */
.success {
background-color: #aca;
color: #90ee90;
}
/* good */
.success {
background-color: #ACA;
color: #90EE90;
}
/* bad */
.success {
background-color: #ACA;
color: #90ee90;
}
Copy after login
3.6 2D Position [Mandatory] Both horizontal and vertical positions must be given. Explanation: The initial value of the 2D position is 0% 0%, but when there is only a value in one direction, the value in the other direction will be parsed as center. To avoid confusion in understanding, values in both directions should be given simultaneously. Definition of background-position attribute value Example:
/* good */
body {
background-position: center top; /* 50% 0% */
}
/* bad */
body {
background-position: top; /* 50% 0% */
}
Copy after login
4. Text layout4.1 Font family
[mandatory] in the font-family attribute The font family name should use the English Family Name of the font. If there are spaces, they must be placed in quotation marks. Explanation: The so-called English Family Name is a metadata of the font file. Common names are as follows:
/* good */
.box {
transition: transform 1s;
}
.box:hover {
transform: translate(20px); /* move right for 20px */
}
/* bad */
.box {
left: 0;
transition: left 1s;
}
.box:hover {
left: 20px; /* move right for 20px */
}
Copy after login
6 响应式 [强制] Media Query 如果有多个逗号分隔的条件时，应将每个条件放在单独一行中。 示例：
@media
(-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
(min--moz-device-pixel-ratio: 2), /* Older Firefox browsers (prior to Firefox 16) */
(min-resolution: 2dppx), /* The standard way */
(min-resolution: 192dpi) { /* dppx fallback */
/* Retina-specific stuff here */
}
The above is the detailed content of Study Guide to CSS Code Writing Standards. For more information, please follow other related articles on the PHP Chinese website!
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
