资讯专栏INFORMATION COLUMN

上云采购季！| 2核2G4M爆款云服务器低至59元/年，更有多台、长期优惠，快来选购！

立即前往
首页/文章专栏/Less 编码规范 (1.1)

Less 编码规范 (1.1)

xorpay / 932人阅读

摘要：代码的基本规范和原则与编码规范保持一致。变量的变量值总是以同一作用域下最后一个同名变量为准，务必注意后面的设定会覆盖所有之前的设定。的参数分隔符使用和均可，但在同一项目中必须保持统一。

转载：原地址

简介

该文档主要的设计目标是提高 Less 文档的团队一致性与可维护性。

Less 代码的基本规范和原则与 CSS 编码规范 保持一致。

编撰

erik、顾轶灵、黄后锦、李玉北、赵雷。

本文档由商业运营体系前端技术组审校发布。

要求

在本文档中，使用的关键字会以中文+括号包含的关键字英文表示：必须（MUST）。关键字"MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RECOMMENDED", "MAY", and "OPTIONAL"被定义在rfc2119中。

编码

使用UTF-8编码。不得（MUST NOT）包含BOM信息。

代码组织

代码必须（MUST）按如下形式按顺序组织：

@import

变量声明

样式声明

less// ✓
@import "est/all.less";

@default-text-color: #333;

.page {
    width: 960px;
    margin: 0 auto;
}
@import 语句

@import 语句引用的文件必须（MUST）写在一对引号内，.less 后缀不得（MUST NOT）省略（与引入 CSS 文件时的路径格式一致）。引号使用 " 和 " 均可，但在同一项目内必须（MUST）统一。

less// ✗
@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）保留空格。

less// ✗
.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）书写单位。

less// ✗
@a: 200px;
@b: (@a+100)*2;

// ✓
@a: 200px;
@b: (@a + 100px) * 2;
混入（Mixin）

Mixin 和后面的空格之间不得（MUST NOT）包含空格。在给 mixin 传递参数时，在参数分隔符（, / ;）后必须（MUST）保留一个空格：

less// ✗
.box {
    .size(30px,20px);
    .clearfix ();
}

// ✓
.box {
    .size(30px, 20px);
    .clearfix();
}
选择器

当多个选择器共享一个声明块时，每个选择器声明必须（MUST）独占一行。

less// ✗
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）保持一致。

less// ✗
transition-duration: 0.5s, .7s;

// ✓
transition-duration: .5s, .7s;
0 值

当属性值为 0 时，必须（MUST）省略可省的单位（长度单位如 px、em，不包括时间、角度等如 s、deg）。

less// ✗
margin-top: 0px;

// ✓
margin-top: 0;
颜色

颜色定义必须（MUST）使用 #rrggbb 格式定义，并在可能时尽量（SHOULD）缩写为 #rgb 形式，且避免直接使用颜色名称与 rgb() 表达式。

less// ✗
border-color: red;
color: rgb(254, 254, 254);

// ✓
border-color: #f00;
color: #fefefe;
私有属性前缀

同一属性有不同私有前缀的，尽量（SHOULD）按前缀长度降序书写，标准形式必须（MUST）写在最后。且这一组属性以第一条的位置为准，尽量（SHOULD）按冒号的位置对齐。

less// ✓
.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）仅在必须区分上下文时才引入嵌套关系（在嵌套书写前先考虑如果不能嵌套，会如何书写选择器）。

less// ✗
.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 形式。

less// ✗
@sidebarWidth: 200px;
@width:800px;

// ✓
@sidebar-width: 200px;
@width: 800px;
继承

使用继承时，如果在声明块内书写 :extend 语句，必须（MUST）写在开头：

less// ✗
.sub {
    color: red;
    &:extend(.mod all);
}

// ✓
.sub {
    &:extend(.mod all);
    color: red;
}
混入（Mixin）

在定义 mixin 时，如果 mixin 名称不是一个需要使用的 className，必须（MUST）加上括号，否则即使不被调用也会输出到 CSS 中。

less// ✗
.big-text {
    font-size: 2em;
}

h3 {
    .big-text;
}

// ✓
.big-text() {
    font-size: 2em;
}

h3 {
    .big-text();
}

如果混入的是本身不输出内容的 mixin，必须（MUST）在 mixin 后添加括号（即使不传参数），以区分这是否是一个 className（修改以后是否会影响 HTML）。

less// ✗
.box {
    .clearfix;
    .size (20px);
}

// ✓
.box {
    .clearfix();
    .size(20px);
}

Mixin 的参数分隔符使用 , 和 ; 均可，但在同一项目中必须（MUST）保持统一。

命名空间

变量和 mixin 在命名时必须（MUST）遵循如下原则：

一个项目只能引入一个无命名前缀的基础样式库（如 est）

业务代码和其他被引入的样式代码中，变量和 mixin 必须有项目或库的前缀

字符串

在进行字符串转义时，使用 ~"" 表达式与 e() 函数均可，但在同一项目中必须（MUST）保持一致。

字符串两侧的引号必须（MUST）使用 "。

JS 表达式

可以（MAY）使用 JS 表达式（~``）生成属性值或变量，其中包含的字符串两侧的引号尽量（SHOULD）使用单引号（"）。

注释

单行注释尽量（SHOULD）使用 // 方式。

less// Hide everything
* {
    display: none;
}
云服务器 GPU云服务器 规范编码 编码规范 php编码规范 js安全编码规范

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/110995.html

相关文章

  • 编写灵活、稳定、高质量的CSS代码的规范

    摘要：过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。只有在必要的时候才将限制在最近的父元素内也就是后代选择器例如，不使用带前缀的时前缀类似于命名空间。制定一致的注释规范。 一、语法 1.1 注意 （1）用两个空格来代替制表符（tab） -- 这是唯一能保证在所有环境下获得一致展现的方法。 （2）为选择器分组时，将单独的选择器单独放在一行。 （3...

    psychola 评论0 收藏0

  • 前端编码规范之：样式（scss）编码规范

    摘要：前端编码规范之使用规范前端编码规范之样式编码规范前端编码规范之结构规范前端编码规范之最佳实践前端编码规范之编码规范命名的原则是通俗易懂，尽量保持不重复冲突，尽量不要用。我觉得应该避免出现出现这种方式用预处理器拼接出来的名称，会生成。 前端编码规范之：Git使用规范 前端编码规范之：样式（scss）编码规范 前端编码规范之：HTML结构规范 前端编码规范之：Vue最佳实践 前端编码规范...

    reclay 评论0 收藏0

  • 莫闲前端之路学习markdown使用，html和css的编写顺序以及class命名规范

    摘要：属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称，使用有组织的或目的明确的名称名称应当尽可能短，并且意义明确，避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。 html属性顺序 class id data-*,name src, for, type, href title, alt aria-*, role /*a标签*/ Ex...

    mo0n1andin 评论0 收藏0

  • 莫闲前端之路学习markdown使用，html和css的编写顺序以及class命名规范

    摘要：属性顺序标签标签标签必须加上命名命名规范名称中只能出现小写字符和破折号使用有意义的名称，使用有组织的或目的明确的名称名称应当尽可能短，并且意义明确，避免过度任意的简写。而是一个尚未被改变过的也是属于的元素。 html属性顺序 class id data-*,name src, for, type, href title, alt aria-*, role /*a标签*/ Ex...

    Snailclimb 评论0 收藏0

发表评论

登陆后可评论

0条评论

xorpay

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<