发表于: 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 缩进

 [强制] 使用 4 个空格做为一个缩进层级,不允许使用 2 个空格 或 tab 字符。 示例:

.selector {                            margin0padding0;                    }

2.3 空格

[强制] 选择器 与 { 之间必须包含空格。 示例:
                           .selector { }                        
[强制] 属性名 与之后的 : 之间不允许包含空格, : 与 属性值 之间必须包含空格。 示例:
                               margin0;                            
[强制] 列表型属性值 书写在单行时,, 后必须跟一个空格。 示例:
                           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 选择器

[强制] 当一个 rule 包含多个 selector 时,每个选择器声明必须独占一行。 示例:

       /* good */        .post,        .page,        .comment {                line-height1.5;        }        /* bad */        .post.page.comment {          line-height1.5;        }


2.6 属性

[强制] 属性定义必须另起一行。 示例:

   /* good */    .selector {            margin0;        padding0;    }    /* bad */    .selector {     margin0padding0}

[强制] 属性定义后必须以分号结尾。 示例:

 /* good */    .selector {        margin0;    }    /* bad */    .selector {        margin0    }

通用

3.1 选择器

[强制] 如无必要,不得为 id、class 选择器添加类型选择器进行限定。 解释: 在性能和维护性上,都有一定的影响。 示例:

   /* good */    #error,    .danger-message {        font-color#c00;    }    /* bad */    dialog#error,    p.danger-message {        font-color#c00;    }

3.2 属性缩写

[建议] 在可以使用缩写的情况下,尽量使用属性缩写。 示例:

 /* good */    .post {            font12px/1.5 arial, sans-serif;    }    /* bad */    .post {        font-family: arial, sans-serif;       font-size12px;           line-height1.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;         top50px;         left0;          overflow-x: hidden;        /* box model: sizes / margins / paddings / borders / ...  */        width200px;        padding5px;       border1px solid #ddd;        /* typographic: font / aligns / text styles / ... */       font-size14px;        line-height20px;        /* 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

[建议] 尽量不使用 !important 声明。 [建议] 当需要强制指定样式且不允许任何场景覆盖时,通过标签内联和 !important 定义样式。 解释: 必须注意的是,仅在设计上 确实不允许任何其它场景覆盖样式 时,才使用内联的 !important 样式。通常在第三方环境的应用中使用这种方案。下面的 z-index 章节是其中一个特殊场景的典型样例。

3.常见问题

问题1:class命名有什么常用方式?

在实际编程中,命名问题一直是很麻烦的问题,要想代码可读性高,维护方便,就必须规范命名。这里介绍几种命名方法


在实际编程中,命名问题一直是很麻烦的问题,要想代码可读性高,维护方便,就必须规范命名。这里介绍几种命名方法

原子类命名规则

将复用性高的单条属性直接命名成类

                    
                        .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.参考文献

参考一:如何规范 CSS 的命名和书写?

Code Guide by @AlloyTeam

参考三:编码规范

8.更多讨论

讨论点一:什么代码规范是好的规范?

鸣谢

感谢大家观看

BY : 庄引




返回列表 返回列表
评论

    分享到