前言
一个优秀的前端程序员，一定要学会用最优雅的CSS代码实现你想要的效果。但是往往在项目开发中，大部分前端程序员都没有养成良好的CSS书写规范，没有从一开始就按照标准去写。每次写样式想到哪儿添到哪儿，完全不考虑属性书写顺序对网页加载的影响。后来才知道原来正确的样式书写顺序，不仅能让代码看起来赏心悦目，也方便后面的查看。下面咱们一起学习一下吧！
各种类型属性的书写顺序及作用
1.CSS书写顺序
- 第一优先级（定位属性）：position、display、float、left、top、right、bottom、overflow、clear、z-index
- 第二优先级（自身属性）：width、height、padding、border、margin、background
- 第三优先级（文字样式）：font-family、font-size、font-style、font-weight、font-varient、color
- 第四优先级（文本属性）：text-align、vertical-align、text-wrap、text-transform、text-indent、text-decoration、letter-spacing、word-spacing、white-space、text-overflow、line-height
- 第五优先级（css3中新增属性）：content、box-shadow、border-radius、transform……
具体代码参考：
/* 显示与流 */
display: ;
visibility: ;
float: ;
clear: ;
/* 位置 */
position: ;
top: ;
right: ;
bottom: ;
left: ;
z-index: ;
/* 尺寸 */
width: ;
min-width: ;
max-width: ;
height: ;
min-height: ;
max-height: ;
overflow: ;
/* 填充 */
padding: ;
padding-top: ;
padding-right: ;
padding-bottom: ;
padding-left: ;
/* 边界 */
border: ;
border-top: ;
border-right: ;
border-bottom: ;
border-left: ;
border-width: ;
border-top-width: ;
border-right-width: ;
border-bottom-width: ;
border-left-width: ;
border-style: ;
border-top-style: ;
border-right-style: ;
border-bottom-style: ;
border-left-style: ;
border-color: ;
border-top-color: ;
border-right-color: ;
border-bottom-color: ;
border-left-color: ;
/* 边缘 */
margin: ;
margin-top: ;
margin-right: ;
margin-bottom: ;
margin-left: ;
/* 轮廓 */
outline: ;
list-style: ;
table-layout: ;
caption-side: ;
border-collapse: ;
border-spacing: ;
empty-cells: ;
/* 排版样式 */
font: ;
font-family: ;
font-size: ;
line-height: ;
font-weight: ;
text-align: ;
text-indent: ;
text-transform: ;
text-decoration: ;
letter-spacing: ;
word-spacing: ;
white-space: ;
vertical-align: ;
color: ;
/* 背景 */
background: ;
background-color: ;
background-image: ;
background-repeat: ;
background-position: ;
/* 不透明度、光标、生成内容 */
opacity: ;
cursor: ;
content: ;
quotes: ;
2.按顺序书写作用
主要作用：减少浏览器reflow（回流），提升浏览器渲染dom的性能。
这里解释一下什么叫重绘和回流？
-
重绘（repaint） ：屏幕的一部分要重绘。渲染树节点发生改变，但不影响该节点在页面当中的空间位置及大小。譬如某个div标签节点的背景颜色、字体颜色等等发生改变，但是该div标签节点的宽、高、内外边距并不发生变化，此时触发浏览器重绘（repaint）。
-
回流（reflow） ：也有称重排，当渲染树节点发生改变，影响了节点的几何属性（如宽、高、内边距、外边距、或是float、position、display：none;等等），导致节点位置发生变化，此时触发浏览器重排（reflow），需要重新生成渲染树。譬如JS为某个p标签节点添加新的样式："display:none;"。导致该p标签被隐藏起来，该p标签之后的所有节点位置都会发生改变。此时浏览器需要重新生成渲染树，重新布局，即回流（reflow）。
浏览器解析HTML和CSS代码的步骤
- 将HTML解析成树形数据结构形成dom树，将CSS代码解析成树形数据结构形成CSS树；
- 将DOM树和CSS树结合成render树；
- 布局render树，有了render树浏览器就可以网页中有哪些节点，根据节点的CSS从属关系计算在屏幕中的位置；
- 绘制render树，将内容显示在屏幕上。
从上面的步骤不难看出，浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第2步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序去遍历。那么只要记住书写样式时按照上面的书写顺序，就会提高程序的性能与网页的流畅度
CSS规范
1.书写规范
- 使用CSS缩写属性：CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。
- 去掉小数点前的“0”：当属性值为小数并且小数点前面为0时，我们可以把0去掉，只需要将小数点与小数点后面的数字写出来就可以了。
- 16进制颜色代码缩写：有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。
- 连字符CSS选择器命名规范：
- 长名称或词组可以使用中横线来为选择器命名。
- 下划线 ’ _’ 禁止出现在class命名中，全小写，统一使用 ‘-’ 连字符。
- 不要随意使用Id：id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
- 删除CSS属性值为0的单位。
- 删除无用CSS样式。
- 使用有意义的名称，使用结构化或者作用目标相关的，而不是抽象的名称。
- 尽量不缩写，除非一看就明白的单词。
- 一律小写，不要使用驼峰命名法，例如：className要写成class-name。
2.CSS命名规范
- 页面结构:
| 网页结构 | CSS命名 |
|---|---|
| 头 | header |
| 内容 | content / container |
| 页面主体 | main |
| 尾 | footer |
| 导航 | nav |
| 侧栏 | sidebar |
| 栏目 | column |
| 页面外围控制整体佈局宽度 | wrapper |
| 左右中 | left / right / center |
- 导航
| 网页结构 | CSS命名 |
|---|---|
| 导航 | nav |
| 主导航 | mainbav |
| 子导航 | subnav |
| 顶导航 | topnav |
| 边导航 | sidebar |
| 左导航 | leftsidebar |
| 右导航 | rightsidebar |
| 菜单 | menu |
| 子菜单 | submenu |
| 标题 | title |
| 摘要 | summary |
- 功能
| 网页结构 | CSS命名 |
|---|---|
| 标志 | logo |
| 广告 | banner |
| 登陆 | login |
| 登录条 | loginbar |
| 注册 | register |
| 搜索 | search |
| 功能区 | shop |
| 标题 | title |
| 加入 | joinus |
| 状态 | status |
| 按钮 | btn |
| 滚动 | scroll |
| 标籤页 | tab |
| 文章列表 | list |
| 提示信息 | msg |
| 当前的 | current |
| 小技巧 | tips |
| 图标 | icon |
| 注释 | note |
| 指南 | guild |
| 服务 | service |
| 热点 | hot |
| 新闻 | news |
| 下载 | download |
以上内容纯属个人见解，若有不足之处欢迎各位大佬在下方评论指出，先分享到这里！！！
