CSS书写规范

前言

Css书写规范不仅能够提高代码的可阅读性，还可以提高浏览器渲染dom的性能

一、命名规则

• 所有的命名最好都小写
• 属性的值一定要用双引号("")括起来，且一定要有值如class="app",id="app"
• 每个标签都要有开始和结束，且要有正确的层次，排版有规律工整例如：<div></div>
• 空元素要有结束的tag或于开始的tag后加上"/" <br />、<img />
• 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border等
• <h1>到<h6>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询,因此，请不要利用标题标签来改变同一行中的字体大小。相反，我们应当使用层叠样式表定义来达到漂亮的显示效果。
• 给每一个表格和表单加上一个唯一的、结构标记id
• 给图片加上alt标签,alt属性是一个必需的属性，它规定在图像无法显示时的替代文本。
• 尽量使用英文命名原则
• 尽量不缩写，除非一看就明白的单词如btn。
• 命名方式(BEM)：类-体（例：g-head）、类-体-修饰符（例：u-btn-active）。
• scss中的变量、函数、混合、placeholder采用驼峰式命名
• 后代选择器：体-修饰符即可（例：.m-page .cut{}）注：后代选择器不要在页面布局中使用，因为污染的可能性较大；
• 减少id命名，id在JS是唯一的，不能多次使用，id的优先级优先与class，所以id应该按需使用，而不能滥用。
  补充命名空间规范：

• 布局：以 g 为命名空间，例如：.g-wrap 、.g-header、.g-content。
• 状态：以 s 为命名空间，表示动态的、具有交互性质的状态，例如：.s-current、s-selected。
• 工具：以 u 为命名空间，表示不耦合业务逻辑的、可复用的的工具，例如：u-clearfix、u-ellipsis。
• 组件：以 m 为命名空间，表示可复用、移植的组件模块，例如：m-slider、m-dropMenu。
• 钩子：以 j 为命名空间，表示特定给 JavaScript 调用的类名，例如：j-request、j-open。

二、相对网页外层重要部分的css命名

外套 wrap ------------------用于最外层
头部 header ----------------用于头部
主要内容 main ------------用于主体内容（中部）
左侧 main-left -------------左侧布局
右侧 main-right -----------右侧布局
导航条 nav -----------------网页菜单导航条
内容 content ---------------用于网页中部主体
底部 footer -----------------用于底部

三、css样式表文件命名

• 主要的 master.css
• 模块 module.css
• 基本共用 base.css
• 布局、版面 layout.css
• 主题 themes.css
• 专栏 columns.css
• 文字 font.css
• 表单 forms.css
• 补丁 mend.css
• 打印 print.css

四、样式属性顺序

1、定位：position z-index left right top bottom clip等。
2、自身属性：width height min-height max-height min-width max-width等。
3、文字样式：color font-size letter-spacing color text-align等。
4、背景：background-image border等。
5、文本属性: text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow等。
6、css3中属性content box-shadow animation border-radius transform等

目的：减少浏览器reflow（回流），提升浏览器渲染dom的性能

文档加载完成到完全显示之间浏览器的渲染流程为：
①解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
②构建render树：DOM树和CSS树合并之后形成的render树。
③布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
④绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。

dom.png

css样式解析到显示至浏览器屏幕上就发生在②③④步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第②步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中，一旦浏览器发现某个元素的定位变化影响布局，则需要倒回去重新渲染正如按照这样的书写书序:

width: 100px;
height: 100px;
background-color: red ;
position: absolute;

当浏览器解析到position的时候突然发现该元素是绝对定位元素需要脱离文档流，而之前却是按照普通元素进行解析的，所以不得不重新渲染，解除该元素在文档中所占位置，然而由于该元素的占位发生变化，其他元素也可能会受到它回流的影响而重新排位。最终导致③步骤花费的时间太久而影响到④步骤的显示，影响了用户体验。
注：还有一个会影响浏览器渲染性能的词汇“repaint（重绘）”

repaint（重绘）：改变某个元素的背景色、文字颜色、边框颜色等等不影响它周围或内部布局的属性时，屏幕的一部分要重画，但是元素的几何尺寸没有变。

注意：

• render树的结构不等同于DOM树的结构，一些设置display:none的节点不会被放在render树中，但会在dom树中。
• 有些情况，比如修改了元素的样式，浏览器并不会立刻回流(reflow)或重绘(repaint)，而是把这些操作积攒一批，然后做一次reflow，这也叫做异步reflow。但是在有些情况下，比如改变窗口大小，改变页面默认字体等浏览器会马上进行reflow。
• 为了更好的用户体验，渲染引擎将会尽可能早的将内容呈现到屏幕上，并不会等到所有的html都解析完成之后再去构建和布局render树。它是解析完一部分内容就显示一部分内容，同时，可能还在通过网络下载其余内容。