CSS开发规范

虽然很久之前整理过一份简单的CSS规范,但是当时写的也不是很全面,有些细节也没有照顾到。记录一份较详细的版本,以备不时之需。

命名规范

  1. 【强制】 class一律使用小写字母+下划线格式命名 例: class="class_name"
  2. 【强制】 id一律使用驼峰命名法 例: id="idName"
  3. 【建议】 命名尽量使用英文命名,拼音也可以使用但尽量使用简称+英文的形式。

书写规范

【强制】属性值前加一个空格

.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;
}
上一篇:python中正则表达式 re.findall 用法


下一篇:ELK之nginx日志分析图表创建