less规范
Less 编码规范 (1.1)
简介
该文档主要的设计目标是提高 Less 文档的团队一致性与可维护性。
Less 代码的基本规范和原则与 CSS 编码规范 保持一致。
编撰
吕俊涛
本文档由商业运营体系前端技术组
审校发布。
要求
在本文档中,使用的关键字会以中文+括号包含的关键字英文表示:必须(MUST)。关键字"MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL"被定义在rfc2119中。
编码
使用UTF-8编码。不得(MUST NOT)包含BOM信息。
代码组织
代码必须(MUST)按如下形式按顺序组织:
@import
- 变量声明
- 样式声明
// ✓
@import "est/all.less";
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
@import
语句
@import
语句引用的文件必须(MUST)写在一对引号内,.less
后缀不得(MUST NOT)省略(与引入 CSS 文件时的路径格式一致)。引号使用 '
和 "
均可,但在同一项目内必须(MUST)统一。
// ✗
@import 'est/all';
@import "my/mixins.less";
// ✓
@import "est/all.less";
@import "my/mixins.less";
空格
属性、变量
选择器和 {
之间必须(MUST)保留一个空格。
属性名后的冒号(:
)与属性值之间必须(MUST)保留一个空格,冒号前不得(MUST NOT)保留空格。
定义变量时冒号(:
)与变量值之间必须(MUST)保留一个空格,冒号前不得(MUST NOT)保留空格。
在用逗号(,
)分隔的列表(Less 函数参数列表、以 ,
分隔的属性值等)中,逗号后必须(MUST)保留一个空格,逗号前不得(MUST NOT)保留空格。
// ✗
.box{
@w:50px;
@h :30px;
width:@w;
height :@h;
color: rgba(255,255,255,.3);
transition: width 1s,height 3s;
}
// ✓
.box {
@w: 50px;
@h: 30px;
width: @w;
height: @h;
transition: width 1s, height 3s;
}
运算
+
/ -
/ *
/ /
四个运算符两侧必须(MUST)保留一个空格。+
/ -
两侧的操作数必须(MUST)有相同的单位,如果其中一个是变量,另一个数值必须(MUST)书写单位。
// ✗
@a: 200px;
@b: (@a+100)*2;
// ✓
@a: 200px;
@b: (@a + 100px) * 2;
混入(Mixin)
Mixin 和后面的空格之间不得(MUST NOT)包含空格。在给 mixin 传递参数时,在参数分隔符(,
/ ;
)后必须(MUST)保留一个空格:
// ✗
.box {
.size(30px,20px);
.clearfix ();
}
// ✓
.box {
.size(30px, 20px);
.clearfix();
}
选择器
当多个选择器共享一个声明块时,每个选择器声明必须(MUST)独占一行。
// ✗
h1, h2, h3 {
font-weight: 700;
}
// ✓
h1,
h2,
h3 {
font-weight: 700;
}
Class 命名不得以样式信息进行描述,如 .float-right
、text-red
等。
省略与缩写
缩写
多个属性定义可以使用缩写时, 尽量(SHOULD)使用缩写。缩写更清晰字节数更少。常见缩写有 margin
、border
、padding
、font
、list-style
等。在书写时必须(MUST)考量缩写展开后是否有不需要覆盖的属性内容被修改,从而带来副作用。
数值
对于处于 (0, 1)
范围内的数值,小数点前的 0
可以(MAY)省略,同一项目中必须(MUST)保持一致。
// ✗
transition-duration: 0.5s, .7s;
// ✓
transition-duration: .5s, .7s;
0 值
当属性值为 0 时,必须(MUST)省略可省的单位(长度单位如 px
、em
,不包括时间、角度等如 s
、deg
)。
// ✗
margin-top: 0px;
// ✓
margin-top: 0;
颜色
颜色定义必须(MUST)使用 #rrggbb
格式定义,并在可能时尽量(SHOULD)缩写为 #rgb
形式,且避免直接使用颜色名称与 rgb()
表达式。
// ✗
border-color: red;
color: rgb(254, 254, 254);
// ✓
border-color: #f00;
color: #fefefe;
私有属性前缀
同一属性有不同私有前缀的,尽量(SHOULD)按前缀长度降序书写,标准形式必须(MUST)写在最后。且这一组属性以第一条的位置为准,尽量(SHOULD)按冒号的位置对齐。
// ✓
.box {
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
其他
可以(MAY)在无其他更好解决办法时使用 CSS hack,并且尽量(SHOULD)使用简单的属性名 hack 如 _zoom
、*margin
。
可以(MAY)但谨慎使用 IE 滤镜。需要注意的是,IE 滤镜中图片的 URL 是以页面路径作为相对目录,而不是 CSS 文件路径。
嵌套和缩进
必须(MUST)采用 4 个空格为一次缩进, 不得(MUST NOT)采用 TAB 作为缩进。
嵌套的声明块前必须(MUST)增加一次缩进,有多个声明块共享命名空间时尽量(SHOULD)嵌套书写,避免选择器的重复。
但是需注意的是,尽量(SHOULD)仅在必须区分上下文时才引入嵌套关系(在嵌套书写前先考虑如果不能嵌套,会如何书写选择器)。
// ✗
.main .title {
font-weight: 700;
}
.main .content {
line-height: 1.5;
}
.main {
.warning {
font-weight: 700;
}
.comment-form {
#comment:invalid {
color: red;
}
}
}
// ✓
.main {
.title {
font-weight: 700;
}
.content {
line-height: 1.5;
}
.warning {
font-weight: 700;
}
}
#comment:invalid {
color: red;
}
变量
Less 的变量值总是以同一作用域下最后一个同名变量为准,务必注意后面的设定会覆盖所有之前的设定。
变量命名必须(MUST)采用 @foo-bar
形式,不得(MUST NOT)使用 @fooBar
形式。
// ✗
@sidebarWidth: 200px;
@width:800px;
// ✓
@sidebar-width: 200px;
@width: 800px;
继承
使用继承时,如果在声明块内书写 :extend
语句,必须(MUST)写在开头:
// ✗
.sub {
color: red;
&:extend(.mod all);
}
// ✓
.sub {
&:extend(.mod all);
color: red;
}
混入(Mixin)
在定义 mixin 时,如果 mixin 名称不是一个需要使用的 className,必须(MUST)加上括号,否则即使不被调用也会输出到 CSS 中。
// ✗
.big-text {
font-size: 2em;
}
h3 {
.big-text;
}
// ✓
.big-text() {
font-size: 2em;
}
h3 {
.big-text();
}
如果混入的是本身不输出内容的 mixin,必须(MUST)在 mixin 后添加括号(即使不传参数),以区分这是否是一个 className(修改以后是否会影响 HTML)。
// ✗
.box {
.clearfix;
.size (20px);
}
// ✓
.box {
.clearfix();
.size(20px);
}
Mixin 的参数分隔符使用 ,
和 ;
均可,但在同一项目中必须(MUST)保持统一。
命名空间
变量和 mixin 在命名时必须(MUST)遵循如下原则:
- 一个项目只能引入一个无命名前缀的基础样式库(如 est)
- 业务代码和其他被引入的样式代码中,变量和 mixin 必须有项目或库的前缀
字符串
在进行字符串转义时,使用 ~""
表达式与 e()
函数均可,但在同一项目中必须(MUST)保持一致。
字符串两侧的引号必须(MUST)使用 "
。
JS 表达式
可以(MAY)使用 JS 表达式(~``
)生成属性值或变量,其中包含的字符串两侧的引号尽量(SHOULD)使用单引号('
)。
注释
单行注释尽量(SHOULD)使用 //
方式。
// Hide everything
* {
display: none;
}
less规范的更多相关文章
- iOS代码规范(OC和Swift)
下面说下iOS的代码规范问题,如果大家觉得还不错,可以直接用到项目中,有不同意见 可以在下面讨论下. 相信很多人工作中最烦的就是代码不规范,命名不规范,曾经见过一个VC里有3个按钮被命名为button ...
- node.js学习(三)简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- 百度MIP页规范详解 —— canonical标签
百度MIP的规范要求必须添加强制性标签canonical,不然MIP校验工具会报错: 强制性标签<link rel="/^(canonical)$/"> 缺失或错误 这 ...
- JavaScript var关键字、变量的状态、异常处理、命名规范等介绍
本篇主要介绍var关键字.变量的undefined和null状态.异常处理.命名规范. 目录 1. var 关键字:介绍var关键字的使用. 2. 变量的状态:介绍变量的未定义.已定义未赋值.已定义已 ...
- JavaScript 开发规范
本篇主要介绍JS的命名规范.注释规范以及框架开发的一些问题. 目录 1. 命名规范:介绍变量.函数.常量.构造函数.类的成员等等的命名规范 2. 注释规范:介绍单行注释.多行注释以及函数注释 3. 框 ...
- c#语言规范
0x00 分类 C#语言规范主要有两个来源,即我们熟知的ECMA规范和微软的规范.尽管C#的ECMA规范已经前后修订4次,但其内容仅仅到C# 2.0为止.所以慕容为了方便自己和各位方便查询,在此将常见 ...
- OSGi规范的C#实现开源
这是大约在3-4年前完成的一个C#实现的OSGi框架,实现的过程参照了OSGi规范与与一些实现思路(感谢当时的那些资料与项目),此框架虽然仅在几个小型项目有过实际的应用,但OSGi的规范实现还是相对比 ...
- 【腾讯优测干货分享】如何降低App的待机内存(二)——规范测试流程及常见问题
本文来自于腾讯优测公众号(wxutest),未经作者同意,请勿转载,原文地址:https://mp.weixin.qq.com/s/806TiugiSJvFI7fH6eVA5w 作者:腾讯TMQ专项测 ...
- 超炫的HTML5粒子效果进度条 VS 如何规范而优雅地code
最近瞎逛的时候发现了一个超炫的粒子进度效果,有多炫呢?请擦亮眼镜! // _this.ch){ _this.particles.splice(i, 1); } }; this.Particle.p ...
- 我的公司培训讲义(1):.NET开发规范教程
这是1年多以前我在公司所做讲座的讲义,现在与园友们分享,欢迎拿去使用.一起讨论.文中有若干思考题,对园友们是小菜一碟.另有设计模式讲义一篇,随后发布.博文上了首页,感谢博客园团队推荐,也感谢所有园友的 ...
随机推荐
- 九度OJ题目1105:字符串的反码
tips:scanf,cin输入字符串遇到空格就停止,所以想输入一行字符并保留最后的"\0"还是用gets()函数比较好,九度OJ真操蛋,true?没有这个关键字,还是用1吧,还是 ...
- CentOS7安装最新版git教程
下载编译工具 yum -y groupinstall "Development Tools" 下载依赖包 yum -y install zlib-devel perl-ExtUti ...
- 重命名Apache日志,新日志文件会放在哪里
重命名access.log为access.log.bak,请问新的apache日志会放在哪? 本文转自51cto的李导的博客2017-09-30-08:11:41 原创作品,允许转载,转载时请务必以超 ...
- linux下安装软件
业界的软件标准安装有三步:configure,make,make install,下面是它们的定义: ./configure是用来检测你的安装平台的目标特征的.比如它会检测你是不是有CC或GCC,并不 ...
- generator生成器iterator遍历器和yield
generator方法()返回一个iterator 使用generator时永远先去调用generator()方法 for of对iterator的调用过程(babel参照) 1,_iterator. ...
- Go基础之锁的初识
当我们的程序就一个线程的时候是不需要用到锁的,但是通常我们实际的代码不会是单个线程的,所有这个时候就需要用到锁了,那么关于锁的使用场景主要涉及到哪些呢? 当我们多个线程在读相同的数据的时候则是需要加锁 ...
- json字符串对象内嵌json对象
有时候需要在json的key:value字符串对象中再嵌入一个json对象,如果需要把如下的json对象作为字符串嵌入到json字符串对象中: { "type": 2, " ...
- SpringBoot中MongoDB注解概念及使用
spring-data-mongodb主要有以下注解 @Id 主键,不可重复,自带索引,可以在定义的列名上标注,需要自己生成并维护不重复的约束.如果自己不设置@Id主键,mongo会自动生成一个唯一主 ...
- shiro权限框架(四)
4.1授权方式 Shiro 支持三种方式的授权 编程式:通过写 if/else 授权代码块完成: Subject = SecurityUtils.getSubject(); if(subject.ha ...
- 关于css的text-indent首行缩进两个字符和图片缩进的问题
段落前面空两个字的距离,不要再使用空格了.应该使用首行缩进text-indent. text-indent可以使得容器内首行缩进一定单位.比如中文段落一般每段前空两个汉字. <style typ ...