1. 文件名规范
文件名建议用小写字母加中横线的方式。为什么呢？因为这样可读性比较强，看起来比较清爽
https://stackoverflow.com/questions/25704650/disable-blue-highlight-when-touch-press-object-with-cursorpointer
那为什么变量名不用小写字母加小划线的方式
family_tree
因为下划线比较难敲(shift + -)，所以一般用驼峰式命名变量的居多。
引入CSS文件的link可以不用带type="text/css"
<link rel="stylesheet" href="test.css">
因为link里面最重要的是rel这个属性，可以不要type，但是不能没有rel。
JS也是同样道理，可以不用type
<script src="test.js"></script>
2. 不要使用样式特点命名
有些人可能喜欢用样式的特点命名
.red-font{
color: red;
}
.p1{
font-size: 18px;
}
.p2{
font-size: 16px;
}
类的命名应当使用它所表示的逻辑意义，
如signup-success-toast、request-demo、agent-portrait、 company-logo等等。
3. 减少覆盖
如下代码，为了让每个house中间的20px的间距，但是第一个house不要有间距：
.house{
margin-top: 20px;
}
.house:first-child{
margin-top: 0;
}
其实可以改成这样
.house + .house{
margin-top: 20px;
}
选择.house后所有的.house，第一个不选中，这样看起来代码就简洁多了。
还有这种情况，如下代码所示：
.request-demo input{
border: 1px solid #282828;
}
.request-demo input[type=submit]{
border: none;
}
其实可以借助一个:not选择器：
.request-demo input:not([type=sbumit]){
border: 1px solid #282828;
}
4. 多写注释
（1）文件顶部的注释
/* * @description整个列表页样式入口文件 * @author yincheng.li */
（2）简单注释
/*为了去除输入框和表单点击时的灰色背景*/
input,
form{
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
}
5. 属性值规范
（1）如果值是0，通常都不用带单位
.list{
border: 1px solid 0;
margin: 0;
}
（2）色值用十六进制，少用rgb
因为使用rgb是一个函数，它还要计算一下转换。如果是带有透明度的再用rgba.
如果色值的六个数字一样，那么写3个就好：
color: #ccc;
（3）注意border none和0的区别
如下两个意思一样
border: 0; border-width: 0;
而下面这两个一样：
border: none; border-style: none;
所以用0和none都可以去掉边框。
6. 不要设置太大的z-index
有些人喜欢设置z-index很大：
z-index: 99999;
以为他是老大了，不会有人再比他高了，但是螳螂捕蝉，黄雀在后，很快得再写一个:
z-index: 999999
通常自己页面的业务逻辑的z-index应该保持在个位数就好了。
7. 注意float/absolute/fixed定位会强制设置成block
a.btn {
float: left;
display: block;
width: 100px;
height: 30px;
}
第二行的display: block其实是没用的，因为如果你浮动了，目标元素就会具有块级盒模型的特性，即使你display: table-cell或者inline也不管用
8. 清除浮动
清除浮动有多种方法，一般用clearfix大法，虽然这个方法有缺陷，但是它比较简单且能够适用绝大多数的场景，一个兼容IE8及以上的clearfix的写法
.clearfix:after{
content: "";
display: table;
clear: both;
}
9. CSS动画规范
（1）不要使用all属性做动画
使用transition做动画的时候不要使用all所有属性，在有一些浏览器上面可能会有一些问题，如下
transition: all 2s linear;
正确的做法是要用哪个属性做动画就写哪个，如果有多个就用隔开
transition: transform 2s linear,
opacity 2s linear;
（2）使用transform替代position做动画
如果能用transform做动画的，就不会使用left/top/margin等，因为transform不会造成重绘，性能要比position那些高很多，特别是在移动端的时候效果比较明显。基本上位移的动画都能用transform完成，不需要使用CSS2的属性，如一个框从右到左弹出。
（3）偏向于使用CSS动画替代JS动画
例如把一个框，从下到上弹出，可以用jQuery的slideUp函数，或者自己写setInterval函数处理，但是这些没有比用CSS来得好。使用CSS，初始状态可以把框translate移动屏幕外，然后点击的时候加上一个类，这个类的transform值为0，然后再用transition做动画就好了。
10. 行内元素可以直接设置margin-left/margin-right
如下有些人为了把span撑开，设置span display: inline-block：
span.phone-numer{
display: inline-block;
margin-left: 10px;
}
其实行内元素可直接margin的左右，能够把它撑开，不需要设置inline-block：
span.phone-numer{
margin-left: 10px;
}
另外需要注意的是img/input/textarea/button默认就是inline-block，也不用再设置。
原文地址：https://www.cnblogs.com/QianBoy/p/8542365.html