1.背景介绍
团队开发过程中，如果编码不规范，很容易造成出现bug之后难以维护等问题 所以一个具有普适性的编码规范具有很重要的意义. 黄金原则：不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。
2.知识剖析
HTML规范
一.DOCTYPE的声明: 每个HTML开头使用！doctype来启用标准模式声明，在此建议使用HTML5的声明模式
二.字符集和编码字符: 在每个页面的head中设置字符集，一般都是使用"UTF-8"
三.语法: 使用四个空格的缩进 在属性上使用双引号 不要忽略可选的关闭标签
四.引入css样式以及js脚本: 需要采用外链的形式引入css样式/js脚本，方便管理和修改
五.正确的标签嵌套
除了固定的嵌套规则（如ul包含li，ol包含li等），一般遵循以下规则：
1.块级元素与块级元素平级、内联元素与内联元素平级
2.块级元素可以包含内联元素或某些块级元素，但内联元素不能包含块级元素
3.有几个特殊的块级元素只能包含内联元素，不能再包含块级元素 h1~h6、p、dt。
4.块级元素不能放在标签p里面。
5.li标签可以包含div标签，因为li和div标签都是装在内容的容器。
六.属性顺序
HTML属性应该按照特定的顺序出现保证可读性
除了固定的嵌套规则（如ul包含li，ol包含li等），一般遵循以下规则：
1.class
2.id、name.
3.data-*
4.src，for，tpye，href等
5.title，alt
6.role，aria-*
七.逻辑顺序
尽量让自己的网站按照先后顺序 比如先写页头，在写页体，最后写页脚
CSS书写规范
一.声明顺序
1.positioning 定位
2.因为可使一个元素脱离文档流，覆盖盒模型相关的样式
3.Box model盒模型
4.Typographic 排版
5.Visual 外观
二.媒体查询
尽量将媒体查询的位置靠近他们的相关的规则。不要把他们放在一个独立 文件当中，也不要写在最底下，以免容易忘记
三.CLASS的命名
不但要自己能看懂代码，也要别人能轻松读懂自己的代码。
1.规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或_
2.命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合+
3.不允许通过1、2、3等序号进行命名；避免class与id重名
4.class用于标识某一个类型的对象，命名必须言简意赅
5.尽可能提高代码模块的复用，样式尽量用组合的方式
6.规则名称中不应该包含颜色（red/blue）、定位（left/right）等与具体显示效果相关的信息。 应该用意义命名，而不是样式显示结果命名
四.属性简写
坚持限制属性取值简写的使用，过度使用属性简写往往会导致更混乱的代码。 常见的属性简写滥用包括： padding，margin，font，background等
3.常见问题
class命名有什么常用的方式？
4.解决方案
原子类命名
这个关键在于拼凑组合.ft{folat：right；}
模块命名
按照职能划分命名规则 nav模块，可以命名为nav-tittle、nav-left
BEM命名
BEM的优点是独一无二 ，不用担心自己的样式被覆盖 缺点就是class名太长了，修改更新不方便
5.编码实战
demo
6.扩展思考
在实际写代码的时候到底该如何选择命名方式？ 可以记住常见的class关键词，在此基础上特殊化class 也可以参考github上的热门项目
7.参考文献
参考一：推酷
参考二：豆瓣
8.更多讨论
常用的class关键词有哪些?
三个问题：
1.属性的声明应该按照什么顺序？
解答：
相关的属性声明应该以下面的顺序分组处理：
1、Positioning位置属性（position, top, right, z-index, display, float等）
2、Box model盒模型 （width,height,padding,margin）
3、Typographic排版（font,line-height,letter-spacing,color,text-align等）
4、Visual外观（background,border等）
Positioning处在第一位，因为他可以使一个元素脱离正常文本流，并且覆盖盒模型相关的样式。盒模型紧跟其后，因为他决定了一个组件的大小和位置。
其他属性只在组件内部起作用或者不会对前面两种情况的结果产生影响，所以他们排在后面。
2.css命名在什么情况下必须用到层级？
解答：
因为只有定位了的元素才有设置层级的必要。
正常的div只有一层文档流，div按先后顺序从上往下排。
设置了定位的元素脱离了这个文档流。但是，其实定位元素也不是一定非得设置层级。如果你的定位元素代码也是按照“先写的在下层，后写的在上层”这种规则写的，那就不用设置层级。
但在实际的复杂网页中，可能并没有遵循这种规则，所以需要设置层级来设置上下前后顺序
3.如何减少css的声明？
解答：
比如有一对象，在公共CSS文件中定义过：div#code{top:1px;right:1px;}
但现在需要在显示的地方重新定义为：div#erweima{bottom:1px;right:1px;}，即要取消之前的定义top:1px。
现在我改为：div#erweima{top:;bottom:1px;right:1px;}，也就是给top弄空值，但是浏览器显示的结果还是自动读取在公共CSS中的定义，top:;这种方式浏览器不承认赋空。
注意,我说的那个是公共CSS,所以说,这个问题的前提是不修改公共CSS.
网友评论