CSS编码规范
2019-03-05 本文已影响0人
AuraAura
命名规范
- 语义化标签优先；（多用<article> <footer>）；基于功能命名(侧边栏)、基于内容命名（新闻）、基于表现命名（外边距10px，mt10）
- 命名都用小写
<div class="box"></div>
<div class="Box"></div>/*不推荐*/
- 用引号包裹
<div class="box"></div>
<div class= box></div>/*不推荐*/
4.用中横线连接
<div class="min-box"></div>
<div class="minBox"></div>/*不推荐*/
- 命名体现功能，不涉及表现样式（颜色、字体、边框、背景等等）
<div class="text-lesser"></div>
<div class="light-grey"></div>/*不推荐*/
书写规范
- tab用两个空格表示
- css的：加一个空格，{ 加一个空格
/*不推荐*/
h3 {
font-weight:bold;
}
/* 推荐 */
h3 {
font-weight: bold;
}
/*不推荐*/
#video{
margin-top: 1em;
}
#video
{
margin-top: 1em;
}
/*推荐*/
#video {
margin-top: 1em;
}
- 每条语句后面加分号
- 颜色用小写，#fff
- 小数不用前缀，0.5s->.5s；0后面不加单位(如px）
- 尽量缩写：margin:5px 10px 5px 10px;->margin：5px 10px；
