发表于: 2017-05-22 20:44:31
1 1034
【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 缩进
.selector {
margin: 0; padding: 0;
}
2.3 空格
.selector { }
[强制] 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。 示例: margin: 0;
[强制] 列表型属性值 书写在单行时,, 后必须跟一个空格。 示例: font-family: Arial, sans-serif;
2.4 行长度
[强制] 每行不得超过 120 个字符,除非单行不可分割。 解释: 常见不可分割的场景为URL超长。 [建议] 对于超长的样式,在样式值的 空格 处或 , 后换行,建议按逻辑分组。 示例:
/* 不同属性值按逻辑分组 */
background:
transparent url(aVeryVeryVeryLongUrlIsPlacedHere)
no-repeat 0 0;
/* 可重复多次的属性,每次重复一行 */
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 选择器
/* 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.5 arial, 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.5 arial, 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: 1px solid #ddd;
/* typographic: font / aligns / text styles / ... */
font-size: 14px;
line-height: 20px;
/* visual: colors / shadows / gradients / ... */
background: #f5f5f5;
color: #333;
-webkit-transition: color 1s;
-moz-transition: color 1s;
transition: color 1s;
}
3.4 清除浮动
[建议] 当元素需要撑起高度以包含内部的浮动元素时,通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。 解释: 触发 BFC 的方式很多,常见的有:
float 非 none
position 非 static
overflow 非 visible
注意,对已经触发 BFC 的元素不需要再进行 clearfix。
3.5 !IMPORTANT
3.常见问题
问题1:class命名有什么常用方式?
3.5 !IMPORTANT
3.常见问题
问题1:class命名有什么常用方式?
4.解决方案
在实际编程中,命名问题一直是很麻烦的问题,要想代码可读性高,维护方便,就必须规范命名。这里介绍几种命名方法
3.5 !IMPORTANT
3.常见问题
问题1:class命名有什么常用方式?
4.解决方案
在实际编程中,命名问题一直是很麻烦的问题,要想代码可读性高,维护方便,就必须规范命名。这里介绍几种命名方法
原子类命名规则
将复用性高的单条属性直接命名成类
.ml5{margin-left: 5px;}
模块命名规则
按照职能划分命名规则
例如,模块是nav,便可以命名nav-tittle、nav-left
BEM
BEM思想是由于项目开发中,每个组件都是唯一无二的,其名字也是独一无二的,组件内部元素的名字都加上组件名,并用元素的名字作为选择器,自然组件内的样式就不会与组件外的样式冲突了。这是通过组件名的唯一性来保证选择器的唯一性,从而保证样式不会污染到组件外。
BEM的命名规矩很容易记:block-name__element-name–modifier-name,也就是模块名 + 元素名 + 修饰器名
<div class="page-btn">
<button type="button" class="page-btn__prev">上一页</button>
<!-- ... -->
<button type="button" class="page-btn__next">下一</button>
</div>
问题一:原子类的优劣?
原子类在网上争议非常大,原子类简单方便,但是不宜维护,控制困难。原子类其实不是一种工具,而是一种编写 CSS 的思想,即:抽出高度复用的样式模块,独立成一个原子类,为对应的模块添加。但是不宜过度使用,负责就和直接添加style没有区别了,在涉及数值方面我的建议时不要使用原子类,否则修改起来超级麻烦,可以使用less、sass等代替
7.参考文献
5.编码实战
6.扩展思考
问题一:原子类的优劣?
原子类在网上争议非常大,原子类简单方便,但是不宜维护,控制困难。原子类其实不是一种工具,而是一种编写 CSS 的思想,即:抽出高度复用的样式模块,独立成一个原子类,为对应的模块添加。但是不宜过度使用,负责就和直接添加style没有区别了,在涉及数值方面我的建议时不要使用原子类,否则修改起来超级麻烦,可以使用less、sass等代替
7.参考
5.编码实战
6.扩展思考
问题一:原子类的优劣?
原子类在网上争议非常大,原子类简单方便,但是不宜维护,控制困难。原子类其实不是一种工具,而是一种编写 CSS 的思想,即:抽出高度复用的样式模块,独立成一个原子类,为对应的模块添加。但是不宜过度使用,负责就和直接添加style没有区别了,在涉及数值方面我的建议时不要使用原子类,否则修改起来超级麻烦,可以使用less、sass等代替
7.参:
参考一:如何规范 CSS 的命名和书写?
参考三:编码规范
8.更多讨论
讨论点一:什么代码规范是好的规范?
鸣谢
感谢大家观看
BY : 庄引
评论