turbo.css -- 高质量css模块化设计

Posted on 2015-03-09   |  

css也要模块化？

css命名对html的模块化，标准化与网站维护成本起到决定性的作用，特别对于很多大型复杂站点来说，在经过大量的后期需求变更与维护后，css已然变得面目全非。没有前期合理的架构，导致后期无法灵活的适应需求变更，让维护工作成为“打补丁”、“填漏洞”。还在为 box_right，color_yellow这种命名方式头疼吗？ html模块化，从css模块化开始！

css模块化优点

  1. 减少页面样式与通用或外部插件样式冲突的几率
  2. 分组管理，解放命名局限性
  3. 提高多人协作时代码可阅读性
  4. 仅通过css结构即可大致了解html结构与模块划分
  5. 降低后期维护成本
  6. 解放html，用css掌控一切！

命名分隔符

首先，严格规范分隔符用法，可以用-或_作为命名分隔符，以下以-为例：

.[分组]-[类型]-[描述]

在turboCSS中，分隔符不再随意的用来做单词分隔，而是赋予了关键性作用。例如：

.f-search-md

[f]表示该样式所处的分组（后面会详细介绍），[search] 表示该样式的类型，[md]则为该类型的描述。在同一个类型出现第一次时，我们一般只需使用 f-search 即可。而中间的 [类型] 尽量避免使用一些具体的业务命名，如

.g-newslist //错误写法，如果同样的样式用在攻略，排行榜等，则与news新闻意义不符

尽量使用描述该类型最本质的单词

.g-textlist //文字列表

第二个-后的 [描述] 也尽量不要用到具体的业务命名，如

.f-search-hot //错误写法，当前搜索模块用于热门搜索，可同样的样式后期可能用于任何地方

使用数字或字母区分多种不同的search类型，摆脱业务限制，如

.f-search-2

或者

.f-search-a

当你十分确定一个样式只可能用于一个具体业务时，才可使用 f-search-hot 这样的命名（不推荐）

如何进行模块化

首先，将页面样式以通用性为指标进行分组，根据页面复杂程度，适当调整分组细分力度，以下详细介绍各分组作用（通用性由高到低排列）

[f-] frame(跨页面级通用框架样式)

以[f-]为前缀的样式，代表该结构为页面级别框架结构，例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.f-topbar{
	/*通用顶部条*/
}  
.f-header{
	/*通用头部*/
}  
.f-nav{
	/*通用导航*/
}     
.f-categroy{
	/*通用分类导航*/
}
.f-crumb{
	/*通用面包屑导航*/
}     
.f-footer{
	/*通用底部*/
}
.f-box{
	/*通用盒子*/
}

[w-] widget(页面级通用组件样式)

以[w-]为前缀的样式，代表该结构为页面通用组件或小挂件，通常绑定JS交互操作，例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
.w-slide{
	/*幻灯片组件*/
}
.w-paging{
	/*静态分页组件*/
}
.w-tab{
	/*标签切换组件*/
}
.w-modal{
	/*模态框组件*/
}
.w-dialog{
	/*对话框组件，模态框组件其中一种*/
}
.w-scroll{
	/*自定义滚动条组件*/
}
.w-select{
	/*自定义下拉框组件*/
}
.w-toggle{
	/*折叠组件*/
}
.w-share{
	/*分享组件*/
}
.w-bookmark{
	/*收藏组件*/
}
.w-copy{
	/*复制组件*/
}
.w-backtop{
	/*回到顶部组件*/
}
.w-loadmore{
	/*加载更多组件*/	
}

[g-] global(页面级通用内容样式)

以[g-]为前缀的样式，代表该结构为页面级通用 内容 模块，多数为数据通过 后台输出 的模块，常用于循环输出的ul列表上，如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
.g-textlist{
	/*通用文字列表*/
}
.g-imglist{
	/*通用图文列表*/
}
.g-medialist{
	/*富媒体（复杂图文）列表*/
}
.g-icon{
	/*通用图标*/
}
.g-icon-16x{
	/*16x16图标组*/
}
...
.g-btn{
	/*通用按钮*/
}
.g-btn-a{
	/*a类型按钮*/
}
.g-btn-submit{
	/*提交按钮*/
}
...
.g-group{
	/*元件组*/
}
.g-panel{
	/*面板组*/
}
.g-form{
	/*通用表单*/
}
.g-table{
	/*通用表格*/
}
.g-itext{
	/*通用单行文本框*/
}
.g-iarea{
	/*通用多行文本框*/
}
.g-tags{
	/*通用标签*/
}
.g-tips{
	/*通用提示标签*/
}
...

[m-] module(业务级模块样式)

上诉[f-]、[w-]、[g-]均不能受具体业务影响命名，而以[m-]为前缀的样式，代表该结构为普通 业务 模块，可以使用具体的业务命名来划分网站模块，[m-]作为一个灵活的模块载体，可以包容组件模块，内容模块，也可与其他小模块组建成大模块，常见的命名：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
.m-search{
	/*搜索模块*/
	/*注意:f-search为跨页面级别搜索模块，通用性更强，而m-search即为普通搜索模块，尚不知其后期通用性*/
}
.m-topic{
	/*头条新闻模块*/
}
.m-article{
	/*文章模块*/
}
.m-rank{
	/*排行榜模块*/
}
.m-vote{
	/*投票模块*/
}
.m-special{
	/*专题模块*/
}
.m-video{
	/*视频模块*/
}
.m-comment{
	/*评论模块*/
}
.m-popular{
	/*热门搜索模块*/
}
.m-feedback{
	/*意见反馈模块*/
}
...

[l-] layout(页面布局样式)

当一个页面的布局十分复杂时，如果你还在使用 main、section、aside这样的命名来划分列，往往是不够用的，这时可引入 [l-] 布局分组，若与设计师协商参与，将页面按照栅格化标准设计，那么 [l-] 将升级为栅格化布局体系，例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.l-grid{
	/*栅格主体，表示子元素采用栅格布局*/
}
.l-row{
	/*行（用来包裹混合列，清除浮动）*/
}
.l-col{
	/*列（可设置默认值，常带有宽度命名）*/
}
.l-col-320{
	/*宽度为320px的列*/
}
.l-col-6{
	/*栅格系统中的6格宽度列，如使用的是960栅格系统，该列宽度则为460px*/
}

[c-] control(脚本控制与状态样式)

以[c-]为前缀的样式，代表该样式为脚本交互控制的样式，例：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
.c-fluid{
	/*响应式布局切换*/
}
.c-active{
	/*激活状态*/
}
.c-focus{
	/*聚焦状态*/
}
.c-blur{
	/*失焦状态*/
}
.c-disabled{
	/*不可用状态*/
}
.c-info{
	/*普通状态*/
}
.c-success{
	/*成功状态*/
}
.c-error{
	/*错误，失败状态*/
}
.c-warning{
	/*警告*/
}
.c-loading{
	/*加载中状态*/
}
.c-static{
	/*静态定位*/
}
.c-fixed{
	/*固定定位*/
}
.c-open{
	/*打开状态*/
}
.c-close{
	/*关闭状态*/
}

[p-] patch(补丁样式)

当页面需要大量不同类型的补丁样式时，可引入 [p-] 分组，例：

1
2
3
4
5
6
7
8
9
10
11
12
13
.p-left{
	/*左浮动*/
}
.p-right{
	/*右浮动*/
}
.p-mt10{
	/*margin-top:10px*/
}
.p-pl20{
	/*padding-left:20*/
}
...

未完待续…