【CSS-TASK3】那种规范才是最好的规范？
小课堂【武汉第177期】
分享人：庄引
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
前端开发web应用的规范的作用两方面： 1) 代码一致性 2) 最佳实践。 通过保持代码风格一致，容易被理解和被维护。我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险。而通过遵照最佳实践，我们能确保优化的页面加载、性能以及可维护的代码。
2.知识剖析
代码风格
2.1 文件
[建议] CSS 文件使用无 BOM 的 UTF-8 编码。 解释： UTF-8 编码具有更广泛的适应性。BOM 在使用程序或工具处理文件时可能造成不必要的干扰。
2.2 缩进
[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格 或 tab 字符。 示例：
.selector{margin:0;padding:0;}
2.3 空格
[强制] 选择器 与 { 之间必须包含空格。 示例：
.selector{ }
[强制] 属性名 与之后的 : 之间不允许包含空格， : 与 属性值 之间必须包含空格。 示例：
margin:0;
[强制] 列表型属性值 书写在单行时，, 后必须跟一个空格。 示例：
font-family: Arial, sans-serif;
2.4 行长度
[强制] 每行不得超过 120 个字符，除非单行不可分割。 解释： 常见不可分割的场景为URL超长。 [建议] 对于超长的样式，在样式值的 空格 处或 , 后换行，建议按逻辑分组。 示例：
/* 不同属性值按逻辑分组 */background:transparent url(aVeryVeryVeryLongUrlIsPlacedHere)no-repeat00;/* 可重复多次的属性，每次重复一行 */background-image:url(aVeryVeryVeryLongUrlIsPlacedHere)url(anotherVeryVeryVeryLongUrlIsPlacedHere);/* 类似函数的属性值可以根据函数调用的缩进进行 */background-image:-webkit-gradient(linear,left bottom,left top,color-stop(0.04, rgb(88,94,124)),color-stop(0.52, rgb(115,123,162)) );
2.5 选择器
[强制] 当一个 rule 包含多个 selector 时，每个选择器声明必须独占一行。 示例：
/* good */.post,.page,.comment{line-height:1.5;}/* bad */.post,.page,.comment{line-height:1.5;}
2.6 属性
[强制] 属性定义必须另起一行。 示例：
/* good */.selector{margin:0;padding:0;}/* bad */.selector{margin:0;padding:0;}
[强制] 属性定义后必须以分号结尾。 示例：
/* good */.selector{margin:0;}/* bad */.selector{margin:0}
通用
3.1 选择器
[强制] 如无必要，不得为 id、class 选择器添加类型选择器进行限定。 解释： 在性能和维护性上，都有一定的影响。 示例：
/* good */#error,.danger-message{font-color:#c00;}/* bad */dialog#error,p.danger-message{font-color:#c00;}
3.2 属性缩写
[建议] 在可以使用缩写的情况下，尽量使用属性缩写。 示例：
/* good */.post{font:12px/1.5arial, sans-serif;}/* bad */.post{font-family: arial, sans-serif;font-size:12px;line-height:1.5;}
3.3 属性书写顺序
[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
解释：
Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等 另外，如果包含 content 属性，应放在最前面。
示例：
目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
1.背景介绍
前端开发web应用的规范的作用两方面： 1) 代码一致性 2) 最佳实践。 通过保持代码风格一致，容易被理解和被维护。我们可以减少遗留系统维护的负担，并降低未来系统崩溃的风险。而通过遵照最佳实践，我们能确保优化的页面加载、性能以及可维护的代码。
3.2 属性缩写
[建议] 在可以使用缩写的情况下，尽量使用属性缩写。 示例：
/* good */.post{font:12px/1.5arial, sans-serif; }/* bad */.post{font-family: arial, sans-serif;font-size:12px;line-height:1.5; }
3.3 属性书写顺序
[建议] 同一 rule set 下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。 解释： Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等 Box Model 相关属性包括：border / margin / padding / width / height 等 Typographic 相关属性包括：font / line-height / text-align / word-wrap 等 Visual 相关属性包括：background / color / transition / list-style 等 另外，如果包含 content 属性，应放在最前面。 示例：
.sidebar{/* formatting model: positioning schemes / offsets / z-indexes / display / ... */position: absolute;top:50px;left:0;overflow-x: hidden;/* box model: sizes / margins / paddings / borders / ... */width:200px;padding:5px;border:1pxsolid#ddd;/* typographic: font / aligns / text styles / ... */font-size:14px;line-height:20px;/* visual: colors / shadows / gradients / ... */background:#f5f5f5;color:#333;-webkit-transition: color1s;-moz-transition: color1s;transition: color1s;}
3.4 清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。 解释： 触发 BFC 的方式很多，常见的有：
float 非 none
position 非 static
overflow 非 visible
注意，对已经触发 BFC 的元素不需要再进行 clearfix。
3.5 !IMPORTANT
[建议] 尽量不使用 !important声明。 [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important定义样式。 解释： 必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。
3.常见问题
问题1:class命名有什么常用方式？
3.5 !IMPORTANT
[建议] 尽量不使用 !important 声明。 [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。 解释： 必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。
3.常见问题
问题1:class命名有什么常用方式？
4.解决方案
在实际编程中，命名问题一直是很麻烦的问题，要想代码可读性高，维护方便，就必须规范命名。这里介绍几种命名方法
3.5 !IMPORTANT
[建议] 尽量不使用 !important 声明。 [建议] 当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。 解释： 必须注意的是，仅在设计上 确实不允许任何其它场景覆盖样式 时，才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。
3.常见问题
问题1:class命名有什么常用方式？
4.解决方案
在实际编程中，命名问题一直是很麻烦的问题，要想代码可读性高，维护方便，就必须规范命名。这里介绍几种命名方法
原子类命名规则
将复用性高的单条属性直接命名成类
.ml5{margin-left:5px;}
模块命名规则
按照职能划分命名规则
例如，模块是nav，便可以命名nav-tittle、nav-left
BEM
BEM思想是由于项目开发中，每个组件都是唯一无二的，其名字也是独一无二的，组件内部元素的名字都加上组件名，并用元素的名字作为选择器，自然组件内的样式就不会与组件外的样式冲突了。这是通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外。
BEM的命名规矩很容易记：block-name__element-name–modifier-name，也就是模块名 + 元素名 + 修饰器名
上一页下一
问题一:原子类的优劣？
原子类在网上争议非常大，原子类简单方便，但是不宜维护，控制困难。原子类其实不是一种工具，而是一种编写 CSS 的思想，即：抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。但是不宜过度使用，负责就和直接添加style没有区别了，在涉及数值方面我的建议时不要使用原子类，否则修改起来超级麻烦，可以使用less、sass等代替
7.参考文献
5.编码实战
6.扩展思考
问题一:原子类的优劣？
原子类在网上争议非常大，原子类简单方便，但是不宜维护，控制困难。原子类其实不是一种工具，而是一种编写 CSS 的思想，即：抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。但是不宜过度使用，负责就和直接添加style没有区别了，在涉及数值方面我的建议时不要使用原子类，否则修改起来超级麻烦，可以使用less、sass等代替
7.参考
5.编码实战
6.扩展思考
问题一:原子类的优劣？
原子类在网上争议非常大，原子类简单方便，但是不宜维护，控制困难。原子类其实不是一种工具，而是一种编写 CSS 的思想，即：抽出高度复用的样式模块，独立成一个原子类，为对应的模块添加。但是不宜过度使用，负责就和直接添加style没有区别了，在涉及数值方面我的建议时不要使用原子类，否则修改起来超级麻烦，可以使用less、sass等代替
7.参：
参考一：如何规范 CSS 的命名和书写？
Code Guide by @AlloyTeam
参考三：编码规范
8.更多讨论
讨论点一:什么代码规范是好的规范？
鸣谢
感谢大家观看
BY : 庄引
------------------------------------------------------------------------------------------------------------------------
技能树.IT修真院
“我们相信人人都可以成为一个工程师，现在开始，找个师兄，带你入门，掌控自己学习的节奏，学习的路上不再迷茫”。
这里是技能树.IT修真院，成千上万的师兄在这里找到了自己的学习路线，学习透明化，成长可见化，师兄1对1免费指导。快来与我一起学习吧 ！http://www.jnshu.com/login/1/86157900