编码规范

css命名技巧：

语义化：

• 使用合适的标签也就是标签的选择和使用合适的命名是语义化最重要的提现，这让页面更加完美；

1. 语义化标签优先，例如：aside和main标签；
2. 基于功能命名，基于标签命名，基于表现命名，例如根据功能，标签，表现的翻译命名；
3. 在命名的时候注意简略，明了，无后患。

命名规范：

1. 所有命名都推荐使用小写；
2. 命名推荐使用引号包裹；
3. 命名推荐使用中横线链接（使用多个单词连接使用可以使用下划线连接，中横线连接或者第一个单词小写第二个单词第一个字母大写的驼峰写法）；
4. 命名提现功能，不涉及变现样式（颜色，字体，边框，背景等）；
5. 不要过度简写，例如.s。

常见的命名：

1. .wrap或. wrapper:用于外侧包裹；
2. . container或.ct：包裹容器；
3. .header：用于头部
4. .body ：页面body
5. .footer ：页面尾部
6. aside或sidebar：用于侧边栏
7. . content 和.header .footer対应，用于主要内容可以作为body的替换
8. . navigation：导航元素
9. . pagination：用于分页
10. . tabs > .tab:tab切换
11. .breadcrumbs：用于导航栏，面包屑（类似于导航栏，面向路径的导航栏）
12. .dropdown：下拉菜单；
13. .article：用于文章；
14. .main：用于主体；
15. .thumbnail：用于头像，小图像；
16. .media：用于媒体资源；
17. .panel：用于面板；
18. .tooltip：用于鼠标放置上去的提示；
19. .popup：用于鼠标点击弹出的提示；
20. .button，.btn：用于按钮；
21. .ad：用于广告；
22. .subnan：：用于二级导航栏；
23. .menu：用于菜单；
24. .tag：用于标签；
25. .message或者.notice：用于提示消息；
26. .summary：用于摘要；
27. .logo：用于logo；
28. .search：用于搜索框；
29. .login：用于登陆；
30. .register：用于注册；
31. .username：用于用户名；
32. .oassword：用于密码；
33. .banner：用于广告条；
34. .copyright： 版权；
35. modal或者.dialog：用于弹窗；

CSS规范：

书写规范：

1. tab用两个空格表示；
2. css的: 后加个空格，{ 前加个空格；
3. 每条声明后都加上分号；
4. 换行而不是放到一行；
5. 颜色用小写，用缩写，#ffffff—>#fff；
6. 小数不用写前缀，0. 5s —>.5s ; 0不用加单位；
7. 尽量缩写，margin: 5px 10px 5px 10px —> margin: 5px 10px。

黄金定律：

• 永远遵循一套编码规范，不管多少人共同参与同一项目，确保使用同一套编码规范，使得看起来像是一个人写的。

声明顺序：

• 相关的属性声明应当归为一组，并按照下面的顺序排列:
  1. Positioning（位置相关例如，position）
  2. Box model（盒模型相关例如，margin，padding，border，width，height，display）
  3. Typographic（文字相关例如，font-size，行高，文字居中，color）
  4. Visual（视觉相关例如，color，background，边框色，圆角等）
• 由于定位(positioning) 可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。
• 其他属性只是影响组件的内部(inside) 或者是不影响前两组属性，因此排在后面。

html规范：

• 用两个空格来代替制表符(tab) --这是唯一能保证在所有环境下获得一致展现的方法。
• 嵌套元素应当缩进一 次(即两个空格)。
• 对于属性的定义，确保全部使用双引号，绝不要使用单引号。
• 不要在自闭合(self-closing) 元素的尾部添加斜线--HTML .5规范中明确说明这是可选的。
• 不要省略可选的结束标签(closing tag) (例如，</li> 或</body>) 。
• 为每个页面添加一个<DOCTYPE html>,它是一个标准模式的声明，这样确保在每个浏览器中拥有一致的展现；
• 为html根元素指定lang属性，从而为文档设置正确的语言。这有足浴语音合成工具确定其所应该采用的发音，有助于翻译工具确定其翻译时所应遵守的规则等。
• IE兼容模式：IE支持通过特定的<meta> 标签来确定绘制当前页面所应该采用的IE版本。除非有强烈的特殊需求，否則最好是没设置为edge mode,从而通知IE采用其所支持的最新的模式。
• 字符编码：一般采用UTF-8编码；
• 引入CSS和JavaScript文件：根据HTML5规范，在引入CSS和JavaScript文件时一般不需要指定type属性，因为 text/css和text/javascript分别是它们的默认值。
• 尽量遵循HTML标准和语义，但是不要以牺牲实用性为代价，任何时候都要尽量使用最少的标签并保持最小的复杂度；
• 属性顺序：HTML属性应当按照以下给出的顺序依次排序确保代码的易读性，但是没必要必须按照这个规则。

  1. class
  2. id，name
  3. data-*
  4. src，for，type，href
  5. title，alt
  6. aria-*，role
  

• class用于标识高度可复用组建，因此应该排在首位。id用于标识具体组件，应当谨慎使用（例如，页面内的书签），因此排在第二位。