less编码规范

Less 编码规范

简介

因为自己最近写css用的比较多还是less,整理了一份less规范,

代码组织

代码按如下形式按顺序组织:

  1. @import
  2. 变量声明
  3. 样式声明
1 // ?
2 @import "est/all.less";
3
4 @default-text-color: #333;
5
6 .page {
7     width: 960px;
8     margin: 0 auto;
9 }

@import 语句

@import 语句引用的文件写在一对引号内,.less 后缀省略(与引入 CSS 文件时的路径格式一致)。引号使用  和 " 均可。

// ?
@import ‘est/all‘;
@import "my/mixins.less";

// ?
@import "est/all.less";
@import "my/mixins.less";

空格

属性、变量

选择器和 { 之间保留一个空格。

属性名后的冒号(:)与属性值之间保留一个空格,冒号前保留空格。

定义变量时冒号(:)与变量值之间保留一个空格,冒号前保留空格。

在用逗号(,)分隔的列表(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;
}
运算

+ / - / * / / 四个运算符两侧保留一个空格。+ / - 两侧的操作数有相同的单位,如果其中一个是变量,另一个数值书写单位。

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

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

混入(Mixin)

Mixin 和后面的空格之间包含空格。在给 mixin 传递参数时,在参数分隔符(, / ;)后保留一个空格:

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

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

选择器

当多个选择器共享一个声明块时,每个选择器声明独占一行。

// ?
h1, h2, h3 {
    font-weight: 700;
}

// ?
h1,
h2,
h3 {
    font-weight: 700;
}

Class 命名不得以样式信息进行描述,如 .float-righttext-red 等。


省略与缩写

缩写

多个属性定义可以使用缩写时, 尽量使用缩写。缩写更清晰字节数更少。常见缩写有 marginborderpaddingfontlist-style 等。在书写时考量缩写展开后是否有不需要覆盖的属性内容被修改,从而带来副作用。

数值

对于处于 (0, 1) 范围内的数值,小数点前的 0 可以(MAY)省略,同一项目中保持一致。

// ?
transition-duration: 0.5s, .7s;

// ?
transition-duration: .5s, .7s;

0 值

当属性值为 0 时,省略可省的单位(长度单位如 pxem,不包括时间、角度等如 sdeg)。

// ?
margin-top: 0px;

// ?
margin-top: 0;

颜色

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

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

// ?
border-color: #f00;
color: #fefefe;

私有属性前缀

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

// ?
.box {
    -webkit-transform: rotate(30deg);
       -moz-transform: rotate(30deg);
        -ms-transform: rotate(30deg);
         -o-transform: rotate(30deg);
            transform: rotate(30deg);
}

其他

可以在无其他更好解决办法时使用 CSS hack,并且尽量使用简单的属性名 hack 如 _zoom*margin

可以但谨慎使用 IE 滤镜。需要注意的是,IE 滤镜中图片的 URL 是以页面路径作为相对目录,而不是 CSS 文件路径。


嵌套和缩进

嵌套的声明块前增加一次缩进,有多个声明块共享命名空间时尽量嵌套书写,避免选择器的重复。

但是需注意的是,尽量仅在必须区分上下文时才引入嵌套关系(在嵌套书写前先考虑如果不能嵌套,会如何书写选择器)。

// ?
.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 的变量值总是以同一作用域下最后一个同名变量为准,务必注意后面的设定会覆盖所有之前的设定。

变量命名)采用 @foo-bar 形式,使用 @fooBar 形式。

// ?
@sidebarWidth: 200px;
@width:800px;

// ?
@sidebar-width: 200px;
@width: 800px;

继承

使用继承时,如果在声明块内书写 :extend 语句,写在开头:

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

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

混入(Mixin)

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

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

h3 {
    .big-text;
}

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

h3 {
    .big-text();
}

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

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

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

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


命名空间

变量和 mixin 在命名时遵循如下原则:

  • 一个项目只能引入一个无命名前缀的基础样式库(如 est)
  • 业务代码和其他被引入的样式代码中,变量和 mixin 必须有项目或库的前缀

字符串

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

字符串两侧的引号使用 "


注释

单行注释尽量(SHOULD)使用 // 方式。

// Hide everything
* {
    display: none;
}
时间: 2024-10-27 09:35:20

less编码规范的相关文章

java编码规范

右括号") "与其后面的关键字之间,关键字与其后面的左括号"("或"{"之间,以及"}"与"{"之间,要以一个空格隔开:除". "外,所有二元操作符的前.后要加空格:在逗号后边加一个空格. 说明: 一个紧跟着括号的关键词应该被空格分开: 空白应该位于参数列表中逗号的后面: 所有的二元运算符,除了".",应该使用空格将之与操作数分开.一元操作符和操作数之间不应该加空格,

我也学php:编码规范/翻译自PSR

PHP社区百花齐放,拥有大量的函数库.框架和组件.PHP开发者通常会在自己的项目中使用若干个外部库,因而PHP代码遵循或尽量接近同一个代码风格就非常重要,可以让开发者方便地把多个代码库集成在自己的项目中. 框架互操作组(即PHP标准组)发布了一系列代码风格推荐标准,即PSR-0,PSR-1,PSR-2和PSR-3. 不要让这些名称所混淆,这些推荐仅是一些被其它项目所遵循的规则,如Drupal, Zend, Symfony, CakePHP, phpBB, AWS SDK, FuelPHP, Li

阿里Java编码规范

详细,全面 很不错 阿里 Java编码规范

html编码规范

不久前接到老大下达的任务,要拟定一份公司前端编码规范的草稿,参考了各大公司的编码规范,结合现在公司的特点,整理出以下编码规范: html规范 1 文件相关 (1) 文件名以英文为主,可以使用下划线(如active.html),压缩包以项目名+日期的形式. (2) 统一使用utf-8编码. (3) css.js发布到线上都需要压缩. (4) 在追求高度优化的站点,需要对图片也进行无损压缩. 2 代码风格 2.1 命名 (1) 元素 id 必须保证页面唯一.(解释:同一个页面中,不同的元素包含相同的

【转】Airbnb React编码规范

Airbnb的编码规范是在业界非常流行的一套规范,而且它一直都在进化,推出最新技术的规范 原文:https://zhuanlan.zhihu.com/p/20616464 用更合理的方式书写React和JSX 基本规则 每个文件只包含一个React组件: 但是无状态, 或者 Pure 组件 允许一个文件包含多个组件.eslint: react/no-multi-comp. 始终使用 JSX 语法; 不要使用 React.createElement方法,除非初始化 app 的文件不是 JSX 格式

Bootstrap编码规范

黄金定律 永远遵循同一套编码规范 -- 可以是这里列出的,也可以是你自己总结的.如果你发现本规范中有任何错误,敬请指正.通过 open an issue on GitHub为本规范添加或贡献内容. 不管有多少人共同参与同一项目,一定要确保每一行代码都像是同一个人编写的. HTML 语法 用两个空格来代替制表符(tab) -- 这是唯一能保证在所有环境下获得一致展现的方法. 嵌套元素应当缩进一次(即两个空格). 对于属性的定义,确保全部使用双引号,绝不要使用单引号. 不要在自闭合(self-clo

iOS:Cocoa编码规范 -[译]Coding Guidelines for Cocoa

--原文地址:https://developer.apple.com/library/mac/documentation/Cocoa/Conceptual/CodingGuidelines/Articles/FrameworkImpl.html Cocoa编码规范 --前言 用公共API开发一个Cocoa框架,插件,或其他可执行目标,里面的命名编写和规范不同于一般应用程序的开发.因为你开发出来东西是给开发者用的看的,并且他们不熟悉你的编程接口.这个时候API的命名约定就派上用场了,因为它使你的写

说说Python编码规范

前言 已有近两个月没有发表过文章了,前段时间外甥和女儿过来这边渡暑假,平常晚上和周末时间都陪着她们了,趁这个周末有空,再抽空再把这块拾起来.         这么久没写了,再次拿起键盘,想想,发表些什么呢,想起上次公司的代码评审委员会下周其中一个议题是关于Python编码规范的整理,那就趁热打铁,整理一份关于Python编码规范的文章,也为那些写Python的人,提供一些编码注意的一些事项或者说是参考吧. 编码规范的作用         规范故明思义,就是通过不断的总结,吸取好的点,从而形成的一

Android 编码规范

编码规范对于程序员而言,尤为重要,有以下几个原因: 一个软件的生命周期中,80%的花费在于维护: 几乎没有任何一个软件,在其整个生命周期中,均由最初的开发来维护: 编码规范可以改善软件的可读性,可以让程序员尽快而彻底地理解新的代码: 如果你将源码作为产品发布,就需要确认它是否被很好的打包并且清晰无误,一如你已构建的其他任何产品: 命名 1.包命名 包名规则:一个唯一的包名的前缀总是全部小写的ASCII字母并且是一个顶级域名,如com.edu.gov.net.org等.包名的后续部分根据不同机构各

PSR : php编码规范

诸王混战 关于开发标准这块,可以说一直都是风格迥异,各家都有各家的玩法,民间更是个人玩个人的.目前我们国内比较出名的几个框架(Yii,Laravel) 都已经支持Composer并且加入了PHP-FIG(php框架程序组). 其中Composer的自动加载就支持PHP-FIG指定的PSR-0 和 PSR-4 规范来实现自动加载机制,并且Composer推荐使用PSR-4 PHP-FIG 这是一个自愿非正式的机构,但是就目前对我们的影响来看,可能都已经默认为一个公信组织了,的的确确制定了不少非常好