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

命名规范

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

书写规范

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

.main{
     margin: 0;   
}

【强制】>、+、~ 选择器的两边各保留一个空格。 

/* 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;
}

 

版权声明：本文为guluowuhen原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/guluowuhen/p/8207285.html