Less 编码规范

简介

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

代码组织

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

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

@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:;
} // ✓
h1,
h2,
h3 {
font-weight:;
}

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:;
} .main .content {
line-height: 1.5;
} .main {
.warning {
font-weight:;
} .comment-form {
#comment:invalid {
color: red;
}
}
} // ✓
.main {
.title {
font-weight:;
} .content {
line-height: 1.5;
} .warning {
font-weight:;
}
} #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;
}

less编码规范的更多相关文章

  1. Android的编码规范

    一.Android编码规范 1.学会使用string.xml文件 在我看来,当一个文本信息出现的次数大于一次的时候就必须要使用string.xml 比如一个保存按钮 , 不规范写法: <Butt ...

  2. PHP 高级编程(1/5) - 编码规范及文档编写

    PHP 高级程序设计学习笔记20140612 软件开发中的一个重要环节就是文档编写.他可以帮助未来的程序维护人员和使用者理解你在开发时的思路.也便于日后重新查看代码时不至于无从下手.文档还有一个重要的 ...

  3. 【原】JAVA SE编码规范

    /* * 编码规范: * 1.所有的命名遵循"见名知意"的原则 * 2.所有的命名不允许使用汉字或拼音 * 3.Java的工程命名建议使用小写,比如:oa.crm.cms... * ...

  4. 浅谈Android编码规范及命名规范

    前言: 目前工作负责两个医疗APP项目的开发,同时使用LeanCloud进行云端配合开发,完全单挑. 现大框架已经完成,正在进行细节模块上的开发 抽空总结一下Android项目的开发规范:1.编码规范 ...

  5. PHP编码规范PSR-2

    .note-content { font-family: "Helvetica Neue", Arial, "Hiragino Sans GB", STHeit ...

  6. Objective-C开发编码规范【转载】

    概要 Objective-C是一门面向对象的动态编程语言,主要用于编写iOS和Mac应用程序.关于Objective-C的编码规范,苹果和谷歌都已经有很好的总结: Apple Coding Guide ...

  7. 前端编码规范之CSS

    "字是门面书是屋",我们不会去手写代码,但是敲出来的代码要好看.有条理,这还必须得有一点约束~ 团队开发中,每个人的编码风格都不尽相同,有时候可能存在很大的差异,为了便于压缩组件对 ...

  8. 前端编码规范之JavaScript

    上次浅谈了下关于CSS的编码规范,大部分童鞋持赞同意见,仍存在一些童鞋不太理解这些规范的意义. 如果是个人或者小作坊开发,其实这些所谓的编码规范也没啥意思,因为大家写好的代码直接就给扔到网上去了,很少 ...

  9. Java Script 编码规范【转】

    Java Script 编码规范 以下文档大多来自: Google JavaScript 编码规范指南 Idiomatic 风格 参考规范 ECMAScript 5.1 注解版 EcmaScript ...

  10. python编码规范

    python编码规范 文件及目录规范 文件保存为 utf-8 格式. 程序首行必须为编码声明:# -*- coding:utf-8 -*- 文件名全部小写. 代码风格 空格 设置用空格符替换TAB符. ...

随机推荐

  1. Android用户界面 UI组件--TextView及其子类(五) DigitalClock,AnalogClock,RadioButton,CheckBox,ToggleButton汇总

    DigitalClock和AnalogClock两个时钟类 可以为DigitalClock设置背景图片,自定义时针,秒针,分针的样式 例子: <?xml version="1.0&qu ...

  2. ThreadPoolExecutor原理及使用

    大家先从ThreadPoolExecutor的总体流程入手: 针对ThreadPoolExecutor代码,我们来看下execute方法: public void execute(Runnable c ...

  3. 【转】VirtualBox下Ubuntu共享文件

    原文网址:http://www.it165.net/os/html/201209/3435.html 今天想从主机上拷贝几个文件到 VirtualBox 的 Ubuntu 下, 但是, Virtual ...

  4. MFC中添加OpenGL

    WINDOWS下展示OpenGL有多种形式: MFC 或 win32,该如何向MFC中添加OpenGL?下面是介绍最简单OpenGL框架. 1.首先通过VS建立MFC应用程序-MyOpenGL,选择单 ...

  5. java基础(十五)集合(二)

    这里有我之前上课总结的一些知识点以及代码大部分是老师讲的笔记 个人认为是非常好的,,也是比较经典的内容,真诚的希望这些对于那些想学习的人有所帮助! 由于代码是分模块的上传非常的不便.也比较多,讲的也是 ...

  6. 是否存在两个树的和是固定数 hashmap使用 leecode

    two sum https://oj.leetcode.com/submissions/detail/8220548/ public class Solution { public int[] two ...

  7. (转载)TRS的WCM6漏洞权限绕过以及绕过密码的登陆方式

    转载于:http://www.2cto.com/Article/201302/191261.html 1.由来:建立在 TRS的WCM6可直接获取管理员密码 漏洞的基础上   2.首先访问wcm目录, ...

  8. MediaInfo源代码分析 2:API函数

    本文主要分析MediaInfo的API函数.它的API函数位于MediaInfo.h文件中的一个叫做MediaInfo的类中. 该类如下所示,部分重要的方法已经加上了注释: //MediaInfo类 ...

  9. Sublime Text 3 格式代码插件 codeFormatter

    一款可以对html.JS.CSS.PHP.python代码格式化的sublime插件 默认快捷键ctrl+alt+F,默认可以对html.js.css格式代码, 如果想对PHP格式化,需要PHP5.6 ...

  10. Zend Framework 2参考Zend\Authentication(摘要式身份验证)

    Zend Framework 2参考Zend\Authentication(摘要式身份验证) 介绍 摘要式身份验证是HTTP身份验证的方法,提高了基本身份验证时提供的方式进行身份验证,而无需在网络上以 ...