标签：inf pac family 注释 pre select 空格 nsf clear
页面布局均采用最新版 flexbox 进行布局，需兼容低版本 IE 项目除外。
.selector {
display: flex;
justify-content: center;
align-items: center;
}
使用 4 个空格作为一个缩进层级，不允许使用 2 个空格或 tab 字符。
.selector {
margin: 0;
padding: 0;
}
每个属性声明末尾都要加分号
.selector {
width: 100%;
height: 100%;
}
: 与属性值之间需要空格，与属性名之间不需要空格
属性值中的 , 后需要空格，, 前不需要空格
选择器 > + ~ 等前后需要空格
选择器与 { 之间需要空格
/ 前后需要空格
注释 /* 后和 */ 前需要空格
.selector > .wrapper {
font-family: "Hiragino Sans GB", sans-serif;
background: rgba(0, 0, 0, 0.5) url(logo.png) no-repeat center / contain;
height: 100%;
}
两个选择器属性块之间保留一个空行
代码块注释前与代码块后保留一个空行
.wrapper {
height: 100%;
/* 字体相关 */
font-family: ‘DINPro‘;
font-size: 16px;
font-weight: 700;
background: #000;
}
.selector {
height: 100%;
}
当一个规则包含多个选择器时，每个选择器声明必须独占一行
每个属性定义必须另起一行
{ 后需要换行，} 前需要换行
.wrapper,
.selector {
width: 100%;
height: 100%;
}
统一使用 /* */ 进行注释
缩进与下一行代码保持一致
可位于一个代码行的末尾，与代码间隔一个空格
.wrapper,
.selector {
/* 字体相关 */
font-family: ‘DINPro‘;
font-size: 16px;
font-weight: 700; /* 字重 */
}
引号统一使用双引号
属性选择器中的属性值需要引号
[class="demo"]::after {
content: "";
}
- 分隔.demo-test,
#test-demo {
width: 100%;
}
16 进制颜色使用小写字母
16 进制颜色尽量使用简写
/* good */
.selector {
color: #abc;
}
/* bad */
.selector {
color: #AABBCC;
}
支持简写的属性尽量使用简写
/* better */
.selector {
background: rgba(0, 0, 0, 0.5) url(logo.png) no-repeat center / contain;
}
/* bad */
.selector {
background-color: rgba(0, 0, 0, 0.5);
background-image: url(logo.png);
background-repeat: no-repeat;
background-position: center;
background-size: contain;
}
display / position / float / clear / visibility 等）width / height / margin / padding / border 等）font / line-height / text-align / vertical-align 等）color / background / opacity / cursor 等） transform / transition / animation 等）不允许有空的规则
元素选择器用小写字母
属性值 0 后面不要加单位
无前缀的标准属性应该写在有前缀的属性后面
不要在一个文件里出现两个相同的规则
发布的代码中不要有 @import
尽量不用 * 选择器
标签：inf pac family 注释 pre select 空格 nsf clear
原文地址：https://www.cnblogs.com/luoxuemei/p/9711903.html
