虽然很久之前整理过一份简单的CSS规范,但是当时写的也不是很全面,有些细节也没有照顾到。记录一份较详细的版本,以备不时之需。
命名规范
- 【强制】 class一律使用小写字母+下划线格式命名 例: class="class_name"
- 【强制】 id一律使用驼峰命名法 例: id="idName"
- 【建议】 命名尽量使用英文命名,拼音也可以使用但尽量使用简称+英文的形式。
书写规范
【强制】属性值前加一个空格
.main{
margin:;
}
【强制】>、+、~ 选择器的两边各保留一个空格。
/* good */
.main > nav + div ~ input {
padding: 10px;
margin-left: 5px;
} /* bad */
.main>nav+div~input {
padding: 10px;
margin-left: 5px;
}
【建议】 尽量减少选择器的层级,最好不要超过四级
【建议】 属性应该按照特定的顺序出现以保证易读性 推荐顺序:class ,id ,name ,data-* ,src, for, type, href, value , max-length, max, min, pattern ,placeholder, title, alt ,required, readonly, disabled
class是为高可复用组件设计的,所以应处在第一位; id更加具体且应该尽量少使用,所以将它放在第二位。
【强制】样式中长度为0的须省略单位
/* good */
body {
padding: 0 5px;
} /* bad */
body {
padding: 0px 5px;
}
【建议】 颜色色值尽量使用小写,相同色值不要出现大小写都存在的情况 。如不小写也需要保证同一项目内保持大小写一致
/* very good */
.success {
background-color: #aca;
color: #90ee90;
} /* good */
.success {
background-color: #ACA;
color: #90EE90;
} /* bad */
.success {
background-color: #ACA;
color: #90ee90;
}
【强制】 font-family 属性中的字体名称应使用字体的英文
常用字体对应family name:宋体(SimSun)、黑体(SimHei)、微软雅黑(Microsoft YaHei)
【强制】 尽量增加样式的复用性,多次使用的样式写成通用class
.left{
float: left;
} .right{
float: right;
}
【强制】如果多个class的样式大部分重复,只有个别样式不同,可以把重复样式独立出来。
/* good */
.container .list .quan,.container .list .friend {
display: inline-block;
width: 4.5rem;
height: 4.5rem;
background-size: 4.5rem auto;
}
.container .list .quan{
background-position: 0 0;
}
.container .list .friend{
background-position: 0 -4.5rem;
} /* bad */
.container .list .quan{
display: inline-block;
width: 4.5rem;
height: 4.5rem;
background-size: 4.5rem auto;
background-position: 0 0;
}
.container .list .friend{
display: inline-block;
width: 4.5rem;
height: 4.5rem;
background-size: 4.5rem auto;
background-position: 0 -4.5rem;
}