css less 不要作用到子对象_前端开发 css、less编写规范

壹 ❀ 引

早在大半年前，我在负责整理定义了前端组JavaScript开发规范与less、css样式开发规范。一直想将两个规范整理成文章，但在整理了JavaScript规范后，我花了较多的时间在学习JavaScript基础知识，所以对于样式规范一直处于放置状态。直到上周我收到了一条关于JavaScript规范的评论，提醒了我样式规范不能再拖了，那么在放假前花点时间整理一遍作为复习也算不错。

说在前面，本文虽然作为规范但对于less与css写法也给出了部分建议，所以在阅读本规范前建议读者先掌握less基本用法，而对于规范这里也只是给出建议，毕竟适合自己的才是最好的，本文开始。

贰 ❀ 命名规范

贰 ❀ 壹 class、id命名

JavaScript变量我们推荐使用小驼峰，但样式命名得做点改变，这里我们推荐使用 - 分隔符拼接。

/* good */

#foo-bar;.foo-bar

/* bad */

#fooBar;.fooBar

贰 ❀ 贰 less变量命名

我们知道less提供了样式变量可供复用，对于多单词变量命名推荐采用 @ 开头并以 - 分隔符拼接的命名方式。

/* good */

@border-color:#fff;

/* bad */

@borderColor: #fff;

贰 ❀ 叁 less函数命名

除了变量，less还提供了函数用于复用多属性class样式类，关于函数推荐以 . 开头 - 分割线拼接方式命名；形参若为多个单词，推荐使用单词首字母小写方式简写，多个形参之间使用分号；隔离。(虽然函数用的不多)

/* good */

.foo-bar (@bg: #f5f5f5;@color: #900; @fz: 12px) {

background: @bg;

color: @color;

font-size: @fz;

}

/* bad */

.foo-bar (@background: #f5f5f5, @color: #900, @font-size: 12px) {

background: @background;

color: @color;

font-size: @font-size;

}

贰 ❀ 肆 less命名空间

less中的命名空间其实就是部分变量与混合模块的包装，对于命名空间推荐采用 # 开头 - 分割线拼接方式进行统一。

/* good */

#foo-bar {

.border-radius() {

font-size: 12px;

};

.border-color() {

color: #fff;

}

}

叁 ❀ less文件引入

less一大好处就是支持将一个文件单纯