不得包含BOM信息,Less 编码规范

时间:2016-05-11 作者:何成蔼 阅读:9098次

  不得包含BOM信息,Less 编码规范   

// ?{ @w:50px; @h :30px; width:@w; height :@h; color: rgba;,+/-两侧的操作数必须有相同的单位,如果其中一个是变量,另一个数值必须书写单位,使用继承时,如果在声明块内书写:extend语句,必须写在开头:。
  该文档主要的设计目标是提高 Less 文档的团队一致性与可维护性。
  Less 代码的基本规范和原则与 CSS 编码规范 保持一致。
  erik、顾轶灵、黄后锦、李玉北、赵雷。
  本文档由商业运营体系前端技术组审校发布。
  在本文档中,使用的关键字会以中文+括号包含的关键字英文表示:必须。关键字"MUST", "MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT", "RMENDED", "MAY", and "OPTIONAL"被定义在rfc2119中。
  使用UTF-8编码。不得包含BOM信息。
  
// ? @import "est/"; @default-text-color: #333;{ width: 960px; margin: 0 auto;
  @import语句引用的文件必须写在一对引号内,.less后缀不得省略。引号使用'和"均可,但在同一项目内必须统一。
  
// ? @import 'est/all'; @import "my/"; // ? @import "est/"; @import "my/";
  选择器和{之间必须保留一个空格。
  属性名后的冒号与属性值之间必须保留一个空格,冒号前不得保留空格。
  定义变量时冒号与变量值之间必须保留一个空格,冒号前不得保留空格。
  在用逗号分隔的列表中,逗号后必须保留一个空格,逗号前不得保留空格。
  
// ?{ @w:50px; @h :30px; width:@w; height :@h; color: rgba;
  transition: width 1s,height 3s;
  } // ?{ @w: 50px; @h: 30px; width: @w; height: @h;
  transition: width 1s, height 3s;
  +/-/*//四个运算符两侧必须保留一个空格。+/-两侧的操作数必须有相同的单位,如果其中一个是变量,另一个数值必须书写单位。
  
// ? @a: 200px; @b: *2; // ? @a: 200px; @b:  * 2;
  Mixin 和后面的空格之间不得包含空格。在给 mixin 传递参数时,在参数分隔符后必须保留一个空格:
  当多个选择器共享一个声明块时,每个选择器声明必须独占一行。
  
// ? h1, h2, h3 { font-weight: 700;
  } // ? h1, h2, h3 { font-weight: 700;
  Class 命名不得以样式信息进行描述,如.float-right、text-red等。
  多个属性定义可以使用缩写时, 尽量使用缩写。缩写更清晰字节数更少。常见缩写有margin、border、padding、font、list-style等。在书写时必须考量缩写展开后是否有不需要覆盖的属性内容被修改,从而带来副作用。
  对于处于范围内的数值,小数点前的0可以省略,同一项目中必须保持一致。
  
// ? transition-duration:,; // ? transition-duration:,;
  当属性值为 0 时,必须省略可省的单位。
  
// ? margin-top: 0px; // ? margin-top: 0;
  颜色定义必须使用#rrggbb格式定义,并在可能时尽量缩写为#rgb形式,且避免直接使用颜色名称与rgb表达式。
  
// ? border-color: red; color: rgb; // ? border-color: #f00; color: #fefefe;
  同一属性有不同私有前缀的,尽量按前缀长度降序书写,标准形式必须写在最后。且这一组属性以第一条的位置为准,尽量按冒号的位置对齐。
  
// ?{ -webkit-transform: rotate; -moz-transform: rotate; -ms-transform: rotate; -o-transform: rotate;
  可以在无其他更好解决办法时使用 CSS hack,并且尽量使用简单的属性名 hack 如_zoom、*margin。
  可以但谨慎使用 IE 滤镜。需要注意的是,IE 滤镜中图片的 URL 是以页面路径作为相对目录,而不是 CSS 文件路径。
  必须采用 4 个空格为一次缩进, 不得采用 TAB 作为缩进。
  嵌套的声明块前必须增加一次缩进,有多个声明块共享命名空间时尽量嵌套书写,避免选择器的重复。
  但是需注意的是,尽量仅在必须区分上下文时才引入嵌套关系。
  } ment-form { ment:invalid { color: red;
  Less 的变量值总是以同一作用域下最后一个同名变量为准,务必注意后面的设定会覆盖所有之前的设定。
  
// ? @sidebarWidth: 200px; @width:800px; // ? @sidebar-width: 200px; @width: 800px;
  使用继承时,如果在声明块内书写:extend语句,必须写在开头:
  
// ?{ color: red; &:extend;
  } // ?{ &:extend; color: red;
  在定义 mixin 时,如果 mixin 名称不是一个需要使用的 className,必须加上括号,否则即使不被调用也会输出到 CSS 中。
  
// ?-text { font-size: 2em;
  如果混入的是本身不输出内容的 mixin,必须在 mixin 后添加括号,以区分这是否是一个 className。
  Mixin 的参数分隔符使用,和;均可,但在同一项目中必须保持统一。
  变量和 mixin 在命名时必须遵循如下原则:
  一个项目只能引入一个无命名前缀的基础样式库
  业务代码和其他被引入的样式代码中,变量和 mixin 必须有项目或库的前缀
  在进行字符串转义时,使用~""表达式与e函数均可,但在同一项目中必须保持一致。
  可以使用 JS 表达式生成属性值或变量,其中包含的字符串两侧的引号尽量使用单引号。
  
// Hide everything * { display: none;
  关键字"MUST",height 3s;,且这一组属性以第一条的位置为准,尽量按冒号的位置对齐,但是需注意的是,尽量仅在必须区分上下文时才引入嵌套关系。
	
        
相关教程