写完一个30多个页面的项目,代码冗余和命名污染确实很头大,代码冗余用less可以尽可能的减少,命名污染问题看了网易的NEC规范,发现非常不错,结合了下less,做个总结
前提:放弃id,统一用class命名;属性间不换行且重要的属性靠前原则;
- 建reset.less(预设样式,功能样式),mixin.less(元素内复用的样式),common.less(公共样式)三个文件,对应的用来放置预设样式he
- 布局(grid):(.g-)开头,页面分割成块,一般有.g-head,.g-body,.g-sidebar,.g-foot等
- 模块(module):(.m-)开头,布局的块里再细分出几个模块,一般有.m-nav,.m-log,.m-news,.m-list等
- 公共模块(common-module):(.cm-)开头,有些模块是多个页面复用的,将它们统一写在common.less中
- 元件(unit):(.u-)开头,模块下多处复用的个体(样式类似即可),写在common.css中用less定制,一般有.u-btn,-u-input等
- 功能(function):(.f-)开头,类似清除浮动,文本溢出之类的,如.f-clearFix,.f-ellipsis等
- 状态:(.is-)开头,如果一个元素有另一个状态(显示隐藏),触发时加.is-active,.is-dis等
- js抓取类:(.j-)开头,为了方便js获取DOM元素,加在需要DOM操作的类上,如.j-nav等
依照上述规则写出来的代码应该是下面这样,结构清晰,结合less,应该可以初步很好地解决代码冗余和命名污染的问题了,等下一个项目实践后再来修改一下
.g-index{
.g-head{
.m-search{
.u-icon-search{...}
.u-ipt{...}
}
.cm-nav{
ul{
li{...}
li{...}
li{...}
}
}
}
.g-body{...}
.g-foot{...}
}