技术学派：CSS规范总结

SS样式的权值(权重)

权值等级的定义

第一等：代表内联样式，如: style=””，权值为1000。

第二等：代表ID选择器，如：#content，权值为100。

第三等：代表类，伪类和属性选择器，如.content，权值为10。

第四等：代表类型选择器和伪元素选择器，如div p，权值为1。

Ps:通用选择器（*），子选择器（>）和相邻同胞选择器（+）并不在这四个等级中，所以他们的权值都为0，!important 优先级最高，万不得已的情况下才用。

权重计算

 #content div#main-content h2=2*100+2*1=202
 #content #main-content>h2=2*100+1=201
 body #content div[id="main-content"] h2=1*100+1*10+3*1=113
 #main-content div.paragraph h2=1*100+1*10+2*1=112
 #main-content [class="paragraph"] h2=1*100+1*10+1*1=111
 div#main-content div.paragraph h2.first=1*100+2*10+3*1=123

优先规则

权值大的样式会覆盖权值小的样式，上面例子的样式会采用权值最大201的样式，当你乱用!important，特别是后期修改样式的时候，是不是有种心力憔悴电费感觉？

当css前后样式项的权值一样，后面的样式会覆盖前面的样式。

Css 概念

CSS规范

命名风格规范

1 css文件命名：统一为小写的英文字母（尽量少用拼音），如：index.css。

当名字需要组合拼写时，可以在单词间加中杠线（不要用下划线：容易写错）。如：member-report.css。（推荐）

或者统一为驼峰式拼写。如：MemberReport.css (项目启动前统一风格)。

2 样式名（html的class名）：在让人看懂的前提下，尽量语义化或简写。尽量少用拼音，和无语义的缩写 .bt .bd 等；风格可以统一为小写字母，如：content。当名字需要组合时，可以采用css文件名的规范。

样式的继承

文本样式

color,font-family, font-size, font-style,
font-variant, font-weight, font, letter-spacing,
line-height，text-align, text-indent, texttransform,word-spacing

列表相关属性

list-style-image, list-style-position,
list-style-type, list-style,

像素化 css

CSS优化

渲染

就是浏览器把HTML代码以css定义的规则显示在浏览器窗口的过程

浏览器对页面呈现的处理流程

用户输入网址（假设是个html页面，并且是第一次访问），浏览器向服务器发出请求，服务器返回html文件；
浏览器开始载入html代码，发现<head>标签内有一个<link>标签引用外部CSS文件；
浏览器又发出CSS文件的请求，服务器返回这个CSS文件；
浏览器继续载入html中<body>部分的代码，并且CSS文件已经拿到手了，可以开始渲染页面了；
浏览器在代码中发现一个<img>标签引用了一张图片，向服务器发出请求。此时浏览器不会等到图片下载完，而是继续渲染后面的代码；
服务器返回图片文件，由于图片占用了一定面积，影响了后面段落的排布，因此浏览器要回过头来重新渲染这部分代码；
浏览器发现了一个包含一行Javascript代码的<script>标签，赶快运行它；
Javascript脚本执行了这条语句，它命令浏览器隐藏掉代码中的某个<div> （style.display=”none”）。杯具啊，突然就少了这么一个元素，浏览器不得不重新渲染这部分代码；
终于等到了</html>的到来，浏览器泪流满面……
等等，还没完，用户点了一下界面中的“换肤”按钮，Javascript让浏览器换了一下<link>标签的CSS路径；
浏览器召集了在座的各位<div><span><ul><li>们，“大伙儿收拾收拾行李，咱得重新来过……”，浏览器向服务器请求了新的CSS文件，重新渲染页面。

回流

当页面的布局发生变化时，浏览器会回过头来重新渲染，这就是页面为什么会慢的一个原因，当一个点的变化影响了布局，这就会使得要倒回去重新渲染，这个倒回去的过程称为 reflow（回流）。

当页面布局和几何属性改变时就需要回流。下述情况会发生浏览器回流

添加或者删除可见的DOM元素；
元素位置改变和计算（offsetWidth 和 offsetHeight）
元素尺寸改变——边距、填充、边框、宽度和高度
内容改变——比如文本改变或者图片大小改变，字体的改变而引起的计算值宽度和高度改变；
页面渲染初始化
浏览器窗口尺寸改变——resize事件发生时；
操作 class 属性，脚本操作 DOM，设置 style 属性的值，激活 CSS 伪类

var s = document.body.style;
s.padding = "2px"; // 回流+重绘
s.border = "1px solid red"; // 再一次 回流+重绘
s.color = "blue"; // 再一次重绘
s.backgroundColor = "#ccc"; // 再一次 重绘
s.fontSize = "14px"; // 再一次 回流+重绘
// 添加node，再一次 回流+重绘
document.body.appendChild(document.createTextNode('abc!'));
回流比重绘的代价要更高，回流的花销跟render tree有多少节点需要重新构建有关系，假设你直接操作body，比如在body最前面插入1个元素，会导致整个render tree回流，这样代价当然会比较高，但如果是指body后面插入1个元素，则不会影响前面元素的回流。

reflow问题也是可以优化的，减少reflow是很有必要的，比如给图片设定好宽度和高度，这样就可以把图片的占位面积预定好。

重绘

一些元素需要更新属性，而这些属性只是影响元素的外观，风格（景颜色，文字颜色，边框颜色）而不会影响布局，浏览器就会repaint。repaint的速度明显比reflow的速度快。

为了帮助小伙伴们更好的学习WEB前端，技术学派整理了WEB前端的相关学习视频及学习路线图。

领取方式

关注“技术学派”后，评论转发文章，私信回复：WEB前端

码规范

CSS样式表是一个序列通用字符集，传输和存储过程中，这些字符必须由支持 US-ASCII（例如 UTF-8, ISO 8859-x, SHIFT JIS 等）字符编码方式编译

文档内嵌样式表编码

When a style sheet is embedded in another document, such as in the STYLE element or "style" attribute of HTML, the style sheet shares the character encoding of the whole document.

当样式出现在其它文档，如 HTML 的 STYLE 标签或标签属性 "style"，样式的编码由文档的决定。

文档外链样式表编码

When a style sheet resides in a separate file, user agents must observe the following priorities when determining a style sheet's character encoding (from highest priority to lowest):

An HTTP "charset" parameter in a "Content-Type" field (or similar parameters in other protocols)BOM and/or [@charset ]()or other metadata from the linking mechanism (if any)charset of referring style sheet or document (if any)Assume UTF-8

文档外链样式表的编码可以由以下各项按照由高到低的优先级顺序决定：

HTTP “Content-Type” 字段参数 “charset”（或其它协议相似的参数）
BOM（byte-order mark）和（或）[@charset ]()
Link 中的元数据设置（如果有的话）
引用样式表字符集或文档编码（如果有的话）
假定为 UTF-8 编码

样式表编码

Authors using an [@charset ]() rule must place the rule at the very beginning of the style sheet, preceded by no characters. (If a byte order mark is appropriate for the encoding used, it may precede the [@charset ]() rule.)

[@charset ]() must be written literally, i.e., the 10 characters '[@charset ]() "' (lowercase, no backslash escapes), followed by the encoding name, followed by '";'.

@charset规则一定要在样式文件的第一行首个字符位置开始，否则的话就会有机会让 BOM 设置生效（如果有设置 BOM 的话）而优于 [@charset ]() 作为样式表的编码
@charset ""; 一定要写上，并且用小写字母，不能出现转义符

团队约定

样式文件必须写上 [@charset ]() 规则，并且一定要在样式文件的第一行首个字符位置开始写，编码名用 “UTF-8”
字符 [@charset ]() ""; 都用小写字母，不能出现转义符，编码名允许大小混写
考虑到在使用“UTF-8”编码情况下 BOM 对代码的污染和编码显示的问题，在可控范围下，坚决不使用 BOM。（更多关于 BOM 可参考 BOM的介绍和「带 BOM 的 UTF-8」和「无 BOM 的 UTF-8」有什么区别？）

推荐：

@charset "UTF-8";

.jdc{}

不推荐：

/**
 * @desc File Info
 * @author Author Name
 * @date 2015-10-10
 */
 
/* @charset规则不在文件首行首个字符开始 */
@charset "UTF-8";

.jdc{}

@CHARSET "UTF-8";
/* @charset规则没有用小写 */

.jdc{}

/* 无@charset规则 */
.jdc{}

更多关于样式编码：CSS style sheet representation

代码风格

代码格式化

样式书写一般有两种：一种是紧凑格式 (Compact)

.jdc{ display: block;width: 50px;}

一种是展开格式（Expanded）

.jdc{
    display: block;
    width: 50px;
}

团队约定

统一使用展开格式书写样式

代码大小写

样式选择器，属性名，属性值关键字全部使用小写字母书写，属性字符串允许使用大小写。

/* 推荐 */
.jdc{
    display:block;
}
    
/* 不推荐 */
.JDC{
    DISPLAY:BLOCK;
}

选择器

尽量少用通用选择器 *
不使用 ID 选择器
不使用无具体语义定义的标签选择器

/* 推荐 */
.jdc {}
.jdc li {}
.jdc li p{}

/* 不推荐 */
*{}
#jdc {}
.jdc div{}

代码缩进

统一使用四个空格进行代码缩进，使得各编辑器表现一致（各编辑器有相关配置）

.jdc {
    width: 100%;
    height: 100%;
}

分号

每个属性声明末尾都要加分号；

.jdc {
    width: 100%;
    height: 100%;
}

代码易读性

左括号与类名之间一个空格，冒号与属性值之间一个空格

推荐：

.jdc { 
    width: 100%; 
}

不推荐：

.jdc{ 
    width:100%;
}

逗号分隔的取值，逗号之后一个空格

推荐：

.jdc {
    box-shadow: 1px 1px 1px #333, 2px 2px 2px #ccc;
}

不推荐：

.jdc {
    box-shadow: 1px 1px 1px #333,2px 2px 2px #ccc;
}

为单个css选择器或新申明开启新行

推荐：

.jdc, 
.jdc_logo, 
.jdc_hd {
    color: #ff0;
}
.nav{
    color: #fff;
}

不推荐：

.jdc,jdc_logo,.jdc_hd {
    color: #ff0;
}.nav{
    color: #fff;
}

颜色值 rgb() rgba() hsl() hsla() rect() 中不需有空格，且取值不要带有不必要的 0

推荐：

.jdc {
    color: rgba(255,255,255,.5);
}

不推荐：

.jdc {
    color: rgba( 255, 255, 255, 0.5 );
}

属性值十六进制数值能用简写的尽量用简写

推荐：

.jdc {
    color: #fff;
}

不推荐：

.jdc {
    color: #ffffff;
}

不要为 0 指明单位

推荐：

.jdc {
    margin: 0 10px;
}

不推荐：

.jdc {
    margin: 0px 10px;
}

属性值引号

css属性值需要用到引号时，统一使用单引号

/* 推荐 */
.jdc { 
    font-family: 'Hiragino Sans GB';
}

/* 不推荐 */
.jdc { 
    font-family: "Hiragino Sans GB";
}

属性书写顺序

建议遵循以下顺序：

布局定位属性：display / position / float / clear / visibility / overflow
自身属性：width / height / margin / padding / border / background
文本属性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient ...

.jdc {
    display: block;
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    margin: 0 10px;
    padding: 20px 0;
    font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    color: #333;
    background: rgba(0,0,0,.5);
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

mozilla官方属性顺序推荐

CSS3浏览器私有前缀写法

CSS3 浏览器私有前缀在前，标准前缀在后

.jdc {
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    -o-border-radius: 10px;
    -ms-border-radius: 10px;
    border-radius: 10px;
}

更多关于浏览器私有前辍写法：#Vendor-specific extensions

参考阅读

Google Code Guide

者：sunshine小小倩

转发链接：https://juejin.im/post/592d4a5b0ce463006b43b6da

在线咨询

上一篇：有一个会代码的大神男朋友是什么感觉
下一篇：大学生必备的66个网站，从大一用到大四！扶我起来，我还能学习

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

技术学派：CSS规范总结

SS样式的权值(权重)

CSS规范

CSS优化

领取方式

码规范

文档内嵌样式表编码

文档外链样式表编码

样式表编码

团队约定

代码风格

代码格式化

代码大小写

选择器

代码缩进

分号

代码易读性

属性值引号

属性书写顺序

CSS3浏览器私有前缀写法

参考阅读

您的项目需求