CSS 样式书写顺序及规范
作者:
WangMin
格言:努力做好自己喜欢的每一件事
在项目中，大部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是用到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对网页加载代码的影响。后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于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……
书写顺序的作用
减少浏览器reflow（回流），提升浏览器渲染dom的性能。
- 解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构
- 构建render树：DOM树和CSS树合并之后形成的render树。
- 布局render树：有了render树，浏览器已经知道那些网页中有哪些节点，各个节点的css定义和以及它们的从属关系，从而计算出每个节点在屏幕中的位置。
- 绘制render树：按照计算出来的规则，通过显卡把内容画在屏幕上。
css样式解析到显示至浏览器屏幕上就发生在2、3、4步骤，可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式，完成第2步，然后开始遍历每个树结点的css样式进行解析，此时的css样式的遍历顺序完全是按照之前的书写顺序。
这里大家可能不是很理解，但只要记住书写样式时按照上面的书写顺序就会提高程序的性能与网页的流畅度。
<div id="box"></div>
未按照属性书写顺序：
#box{
width:200px;
line-height: 30px;
height:200px;
color:blue;
background:lightgoldenrodyellow;
float:right;
}
按照属性书写顺序：（推荐使用）
#box{
float:right;
width:200px;
height:200px;
background:lightgoldenrodyellow;
color:blue;
line-height: 30px;
}
CSS 书写规范
1 、使用CSS缩写属性
CSS有些属性是可以缩写的，比如padding,margin,font等等，这样精简代码同时又能提高用户的阅读体验。如下：
未缩写之前：
#box p{
border-top-style: none;
padding-left: 10px;
padding-right: 20px;
padding-top: 40px;
padding-bottom: 50px;
font-size: 12px;
font-family: "微软雅黑";
line-height: 30px;
}
缩写之后：（推荐使用）
#box p{
border-top: 0;
padding:40px 20px 50px 10px;
font:12px/40px "微软雅黑";
}
简写font属性需要注意以下几点：
- 按照font-style font-variant font-weight font-size/line-height font-family顺序来写；
- 先写字体大小在写字体；
- font-size/line-height作为一组使用，中间用斜杠区分；
- 多个值之间用空格分开；
- 多个字体之间用逗号分开。
2、去掉小数点前的“0”
当属性值为小数并且小数点前面为0时，我们可以把0去掉，只需要将小数点与小数点后面的数字写出来就可以了。 如下：
未去0之前：
font-size:0.9rem;
去0之后：（推荐使用）
font-size:.9rem;
3、16进制颜色代码缩写
有些颜色代码是可以缩写的，我们就尽量缩写吧，提高用户体验为主。颜色代码是用十六进制来表示的，当颜色代码如下时可以进行缩写：
未缩写之前：
background:#ff0000;
缩写之后：（推荐使用）
background:#f00;
4、连字符CSS选择器命名规范
1）长名称或词组可以使用中横线来为选择器命名。
2）下划线 ' _' 禁止出现在class命名中，全小写，统一使用 '-' 连字符。原因如下：
- 浏览器兼容问题 （比如使用_tips的选择器命名，在IE6是无效的）
- 能良好区分JavaScript变量命名（JS变量命名是用“_”）
正确命名方法如下：
#box-text{
border-top: 0;
background:#f00;
padding:40px 20px 50px 10px;
font:12px/40px "微软雅黑";
}
5、不要随意使用Id
id在JS是唯一的，不能多次使用，而使用class类选择器却可以重复使用，另外id的优先级优先与class，所以id应该按需使用，而不能滥用。
6、为选择器添加状态前缀
有时候可以给选择器添加一个表示状态的前缀，让语义更明了，比如下图是添加了“.is-”前缀。
未添加了“.is-”前缀之前：
.test{
background:#f00;
}
添加了“.is-”前缀之后：（推荐使用）
.is_test{
background:#f00;
}
7、删除CSS属性值为0的单位。
8、删除无用CSS样式。
9、使用有意义的名称，使用结构化或者作用目标相关的，而不是抽象的名称。
10、尽量不缩写，除非一看就明白的单词。
11、一律小写，不要使用驼峰命名法，例如：className。
CSS 命名规范（规则）
1、页面结构
| 网页结构 | CSS命名 |
|---|---|
| 头 | header |
| 内容 | content/container |
| 页面主体 | main |
| 尾 | footer |
| 导航 | nav |
| 侧栏 | sidebar |
| 栏目 | column |
| 页面外围控制整体佈局宽度 | wrapper |
| 左右中 | left right center |
2、导航
| 网页结构 | CSS命名 |
|---|---|
| 导航 | nav |
| 主导航 | mainbav |
| 子导航 | subnav |
| 顶导航 | topnav |
| 边导航 | sidebar |
| 左导航 | leftsidebar |
| 右导航 | rightsidebar |
| 菜单 | menu |
| 子菜单 | submenu |
| 标题 | title |
| 摘要 | summary |
3、功能
| 网页结构 | 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 |
| 投票 | vote |
| 合作伙伴 | partner |
| 友情链接 | friendlink |
| 版权 | copyright |
| 4、CSS样式表文件命名 | |
| 所表示的文件 | 文件名 |
| -- | -- |
| 主要的 | master.css |
| 模块 | module.css |
| 基本共用 | base.css |
| 布局、版面 | layout.css |
| 主题 | themes.css |
| 专栏 | columns.css |
| 文字 | font.css |
| 表单 | forms.css |
| 补丁 | mend.css |
| 打印 | print.css |
| 5、css的注释方法 |
/* start*/
css样式区
/* End */
6、class的命名:
1）颜色 : 使用颜色的名称或者16进制代码，如下：
.yellow{color:yellow}
.f00{background:#f00}
.ff8600 {color: #ff8600}
2）字体大小 : 直接使用"font+字体大小"作为名称，如下：
.font12px{font-size:12px}
.font1rem {font-size: 1rem; }
3）对齐样式 : 使用对齐目标的英文名称，如下：
.left { float:left; }
.bottom { float:bottom; }
4） 标题栏样式，使用"类别+功能"的方式命名，如下：
.hotnews { }
.hotproduct { }
以上仅是个人见解，若有不足之处欢迎在下方评论指出，那就先分享到这里!! 😄 后续继续更新!!
