CSS Coding Standards Guide
coding style
Code formatting
There are generally two styles of writing: one is compact format (Compact)
.web{ display: block;width: 50px;}
One is expanded format (Expanded)
.web {
display: block;
width: 50px;
}
Team agreement: uniformly use expanded format writing style
Code case
Style selectors, attribute names, and attribute value keywords are all written in lowercase letters, and uppercase and lowercase letters are allowed in attribute strings.
/* 推荐 */
.web {
display: block;
}
/* 不推荐 */
.web {
display: BLOCK;
}
Selector
- Use generic selectors sparingly *
- Not using ID selector
- Do not use tag selectors without specific semantic definitions
/* 推荐 */
.web {
}
.web li {
}
.web li p {
}
/* 不推荐 */
* {
}
#jdc {
}
.web div {
}
semicolon
A semicolon must be added at the end of each attribute declaration;
.web {
width: 100%;
height: 100%;
}
Code readability
There are no spaces in the color values rgb() rgba() hsl() hsla() rect(), and the values should not contain unnecessary 0s.
/* 推荐 */
.web {
color: rgba(255, 255, 255, 0.5);
}
/* 不推荐 */
.web {
color: rgba(255, 255, 255, 0.5);
}
Do not specify a unit for 0
/* 推荐 */
.web {
margin: 0 10px;
}
/* 不推荐 */
.web {
margin: 0px 10px;
}
CSS3 browser private prefix writing method
CSS3 browser-specific prefixes come first and standard prefixes follow.
.web {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
-o-border-radius: 10px;
-ms-border-radius: 10px;
border-radius: 10px;
}
class naming
- Avoid overly arbitrary abbreviations. .btn represents button, but .s cannot express any meaning.
- Class names should be as short as possible and have clear meaning.
- As project modules increase, it is important to standardize CSS syntax to prevent conflicts between CSS defined in different pages or components. Recommended: BEM, which stands for: Block, Element, Modifier symbol)
.user-info {} # user-info 是一个块，我理解是一个模块
.user-info--feature {} # user-info--feature 是一个修饰符，用来表示这个块的不同状态
.user-info__title{} # user-info__title 是一个元素，属于userinfo模块下的，多个元素组成块
<div class="user-info">
<div class="user-info__title">张三</div>
<div class="user-info__age">18</div>
</div>
<div class="tabs">
<div class="tab tab-active">选中的标签</div>
<div class="tab ">标签二</div>
<div class="tab ">标签三</div>
</div>
css property declaration order
- Positioning
- Box model
- Typographic
- Visual
- Misc
Positioning comes first because it removes elements from the normal document flow and can override box model related styles. The box model comes second because it determines the size and placement of components.
Other properties only affect the internals of the component or do not affect the first two groups of properties, so they are ranked behind.
.declaration-order {
/* Positioning 定位和层级等属性*/
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model 盒子模型或者浮动相关*/
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography 字体配置*/
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual 背景色边框等*/
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc 透明度和动画等*/
opacity: 1;
transition: all 0.5s;
}
SCSS specification
Our development will use SCSS as a preprocessor for css
variable
Reusable attributes should be extracted as page variables as much as possible to facilitate unified maintenance.
// CSS
.web {
color: red;
border-color: red;
}
// SCSS
$color: red;
.web {
color: $color;
border-color: $color;
}
Mixin
Define modules according to functions, and then call them through @include where they need to be used to avoid repeatedly entering code segments when coding.
// CSS
.web_1 {
-webkit-border-radius: 5px;
border-radius: 5px;
}
.web_2 {
-webkit-border-radius: 10px;
border-radius: 10px;
}
// SCSS
@mixin radius($radius: 5px) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
.web_1 {
@include radius; //参数使用默认值
}
.web_2 {
@include radius(10px);
}
// CSS
.web_1 {
background: url(/img/icon.png) no-repeat -10px 0;
}
.web_2 {
background: url(/img/icon.png) no-repeat -20px 0;
}
// SCSS
@mixin icon($x: 0, $y: 0) {
background: url(/img/icon.png) no-repeat $x, $y;
}
.web_1 {
@include icon(-10px, 0);
}
.web_2 {
@include icon(-20px, 0);
}
function function
@function pxToRem($px) {
@return $px / 10px * 1rem;
}
.web {
font-size: pxToRem(12px);
}
Operation specifications
Leave a space between operators
.web {
width: 100px - 50px;
height: 30px / 5;
}
Pay attention to the operation unit. The units participate in the operation at the same time, so 10px is not equal to 10. Special attention needs to be paid during multiplication and division operations.
// 正确的运算格式
.web {
width: 100px - 50px;
width: 100px + 50px;
width: 100px * 2;
width: 100px / 2;
}