虽然很久之前整理过一份简单的CSS规范，但是当时写的也不是很全面，有些细节也没有照顾到。记录一份较详细的版本，以备不时之需。
命名规范
- 【强制】 class一律使用小写字母+下划线格式命名 例： class="class_name"
- 【强制】 id一律使用驼峰命名法 例： id="idName"
- 【建议】 命名尽量使用英文命名，拼音也可以使用但尽量使用简称+英文的形式。
书写规范
【强制】属性值前加一个空格
.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;}CSS开发规范
原文地址：https://www.cnblogs.com/guluowuhen/p/8207285.html