分享人：黄麒二
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
真正阅读程序的是人，而不是计算机，所以所写代码具有良好的可读性，是优秀程序员必备的素质之一。在大型的系统开发中，往往需要很多人的通力配合，例如，开源软件Linux 之所以能够为全球顶尖程序员共享、协作开发，也得益于规范化和标准化的编码规范。
规范应该尽量一致；即使有例外，也只能是少数情况，而不能是很多例外。好的代码规范能够提高代码的可读性便于协作沟通，好的模式能够在上层设计上避免不必要的 bug 出现。
基本准则
符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.
html规范
页面的第一行添加标准模式声明!DOCTYPEhtml
代码缩进：tab键设置四个空格（通常在软件右下角设置相应空格大小）
html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外，其他都为小写，css类都为小写
建议为html根元素指定lang属性，从而为文档设置正确的语言lang="zh-CN"
不同doctype在不同浏览器下会触发不同的渲染模式( )
非特殊情况下样式文件必须外链至head标签之间;非特殊情况下JavaScript文件必须外链至页面底部
尽可能减少div嵌套.
在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中
对于属性的定义，确保全部使用双引号，绝不要使用单引号
小图片请尽可能使用sprite技术,减小http请求
给区块代码及重要功能(比如循环)加上注释,方便后台添加功能。
不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。
CSS书写顺序
显示属性：display/list-style/position/float/clear…
行高：line-height
文本属性：color/font/text-decoration/text-align/text-indent/vertical-align/white-space/content…
其他：cursor/z-index/zoom/overflow
CSS3属性：transform/transition/animation/box-shadow/border-radius
排版规范
如果是在html中写内联的css，则必须写成单行
每一条规则的大括号{前后加空格
属性名冒号之前不加空格，冒号之后加空格
每一个属性值后必须添加分号;并且分号后空格
多个selector共用一个样式集，则多个selector必须写成多行形式
规则书写规范
使用单引号，不允许使用双引号
每个声明结束都应该带一个分号，不管是不是最后一个声明
除16进制颜色和字体设置外，CSS文件中的所有的代码都应该小写。
除了重置浏览器默认样式外，禁止直接为htmltag添加css样式设置
每一条规则应该确保选择器唯一，禁止直接为全局.nav/.header/.body等类设置属性
class命名
命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合+
不建议通过1、2、3等序号进行命名；避免class与id重名
class用于标识某一个类型的对象，命名必须言简意赅
尽可能提高代码模块的复用，样式尽量用组合的方式
规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。应该用意义命名，而不是样式显示结果命名
布局类：header, footer, container, main, content, aside, page, section
包裹类：wrap, inner
区块类：region, block, box
结构类：hd, bd, ft, top, bottom, left, right, middle, col, row, grid, span
列表类：list, item, field
主次类：primary, secondary, sub, minor
状态类：active, current, checked, hover, fail, success, warn, error, on, off
导航类：nav, prev, next, breadcrumb, forward, back, indicator, paging, first, last
交互类：tips, alert, modal, pop, panel, tabs, accordion, slide, scroll, overlay,
分割类：group, seperate, divider
等分类：full, half, third, quarter
表格类：table, tr, td, cell, row
图片类：img, thumbnail, original, album, gallery
论坛类：forum, bbs, topic, post
方向类：up, down, left, right
其他语义类：btn, close, ok, cancel, switch; link, title, info, intro, more, icon; form, label, search, contact, phone, date, email, user; view, loading...
class命名有什么常用方式？
原子类命名
将复用性高的单条属性直接命名成类 .ml5{margin-left:5px;}
模块命名规则
按照职能划分命名规则，例如，模块是nav，便可以命名nav-tittle、nav-left
BEM
BEM思想是由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。这是通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外。
BEM的命名规矩很容易记：block-name__element-name--modifier-name，也就是模块名 + 元素名 + 修饰器名。
原子类的优劣？
原子类简单方便，但是不宜维护，控制困难。原子类其实不是一种工具，而是一种编写CSS的思想，即：抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。但是不宜过度使用，否则就和直接添加style没有区别了,在组件开发中其实不推荐使用原子类，因为这会降低组件的可复用性。可复用性的最理想状态就是组件不仅仅在不同的页面中表现一致，在跨项目的情况下，也能够运行良好。
在项目中，使用原子类之前应该考虑一下，这个场景是否变动大而且不可复用，如果是的话，我们可以放心的使用原子类。
为什么要拆分样式表，怎么拆分样式表？
BY : 黄麒二|江吉仪