我一直认为专业是一种态度。不同于业余，专业代表无论技术高低都会遵守一定的规范，专业代表对某一领域不断的精益求精。专业就是比业余逼格高。
习惯书写规范
css 属性声明的顺序：Positioning(定位)---Box model(盒子模型)---Typographic(文字系列)--Visual(背景颜色)--其他(例animation)
1 .declaration-order { 2 /* Positioning */ 3 position: absolute; 4 top: 0; 5 right: 0; 6 bottom: 0; 7 left: 0; 8 z-index: 100; 9 10 /* Box model */ 11 display: block; 12 box-sizing: border-box; 13 width: 100px; 14 height: 100px; 15 padding: 10px; 16 border: 1px solid #e5e5e5; 17 border-radius: 3px; 18 margin: 10px; 19 float: right; 20 overflow: hidden; 21 22 /* Typographic */ 23 font: normal 13px "Helvetica Neue", sans-serif; 24 line-height: 1.5; 25 text-align: center; 26 27 /* Visual */ 28 background-color: #f5f5f5; 29 color: #fff; 30 opacity: .8; 31 32 /* Other */ 33 cursor: pointer; 34 }
选择器分组时，保持独立选择器独占一行；
声明左括号{前加一个空格；
声明右括号}要单独成行；
声明中的:后要加一个空格；
声明语句应以;结尾；
一般以逗号分隔的属性值，每个逗号后应添加一个空格；
1 .selector, 2 .selector-secondary, 3 .selector[type="text"] { 4 padding: 15px; 5 margin-bottom: 15px; 6 background-color: rgba(0,0,0,.5); 7 box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; 8 }
css尽量缩写。比如font、margin;
去掉前面的0.比如font-size：.8em;
16进制的颜色代码尽量缩写；
链接的设置顺序：a:link -> a:visited -> a:hover -> a:active；
语义化命名class或id；
避免嵌套过多，尽量不要超过3级；
避免用id和class叠加使用；
使用连字符 - 作为ID、Class名称界定符，不要驼峰命名法和下划线；(这条我非常排斥，复制粘贴很不方便的。另外一些坑也是出现在ie6那代版本浏览器，过去这么久了 这条应该可以作废了)
移动端经常会用到媒体查询@media (max-width: 768px)，媒体定义的属性要放到附近，避免修改时遗漏。
注释的写法:
/* Header */ 内容区 /* End Header */
专业的负责
/* @name: 文件的名称 @description: 简要的描述这个css 文件功能 @require: 依赖文件，没有就不用写 @author: 作者 最好附带联系方式(邮箱) */
性能书写规范
js动画时，尽量使用requestAnimationFrame，避免使用setTimeout，setInterval。
避免通过类似 jQuery animate()-style 改变每帧的样式，使用 CSS 声明动画会得到更好的浏览器优化。
使用 translate 取代 absolute 定位就会得到更好的 fps，动画会更顺滑。
尽量不要用float，渲染计算量大。
浏览器读css时，是从右像左读的，所以下面可以少许的提升浏览器渲染速度。
使用继承
1 /* Not recommended */ 2 #bookmarkMenuItem > .menu-left { list-style-image: url(blah) } 3 /* Recommended */ 4 #bookmarkMenuItem { list-style-image: url(blah) }
避免使用通用选择器。
.content * {color: red;}
避免使用标签或 class 选择器限制 id 选择器。
避免使用标签限制 class 选择器。
button#backButton {…}
button.backButton {…}
避免使用多层标签选择器。使用 class 选择器替换，减少 css 查找
treeitem[mailfolder="true"] > treerow > treecell {…}
