scss/less书写规范

一.属性规范

1.属性书写顺序

 （1）位置属性(position, top, right, z-index, display, float等)；  

  （2）大小(width, height, padding, margin)；  

  （3）文字系列(font, line-height, letter-spacing, color- text-align等)；  

  （4）背景(background, border等)；  

   （5）其他(animation, transition等)。

  总结：建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性。

   /*推荐顺序*/

  .example {

               position: absolute;

               width: 100px;

               font-size: 20px;

               background-color: #ccc;

  }

  /*不推荐顺序*/

  .example {

               width: 100px;

               background-color: #ccc;

               position: absolute;

               font-size: 20px;

   }

2.属性用法规范

 （1）缩进：建议使用4个空格做为一个缩进层级。

 （2）非特殊场景尽量少使用!important，如果使用须添加必要的注释。

 （3）属性定义必须另起一行，且属性定义后以分号结尾。

 （4）选择器与"{"之间必须包含空格；属性名与之后的":"之间不允许包含空格；":"与属性值之间必须包含空格。

 （5）尽量少使用将样式的定义写在标签中（如内联样式：style="color:red;"），也不要用js为元素添加内联样式。

3.属性简写

属性可以简写时，强制采用简写方式，可以精简代码且提高阅读体验。

（1）如padding,margin,font,color等等

     /*推荐写法*/

    .example {

             padding: 5px 10px;

     }

     /*不推荐写法*/

     .example {

               padding-top: 5px;

               padding-bottom: 5px;

               padding-left: 10px;

               padding-right: 10px;

       }

（2）小数点前面的'0'建议去除

    /*推荐写法*/

    .example {

         font-size: .8rem;

     }

    /*不推荐写法*/

   .example {

         font-size: 0.8rem;

    }

（3）使用十六进制表示颜色值

        css 中的颜色值可以使用十六进制来表示，在可能的情况下，可以进行缩写，比如：#abf,#ccc。

4.嵌套规则：

（1）嵌套层级不超过四个层级。

（2） 在scss,less中可以嵌套选择器，可以提升代码的简洁性和可读性，但是应该尽量避免使用没有任何内容的选择器。

    应遵循scss/less嵌套顺序：

   a.当前选择器的@extend和@include

   b.当前选择器的样式属性

   c.父级选择器的伪类选择器（:first-child,:active等）

   d.伪类元素（:before,:after）

   e.父级选择器的声明样式

   f.用 scss 的上下文媒体查询

   g.子选择器

二.命名规范

1.文件名称命名

不得包含汉字空格和特殊字符，全部采用小写方式，多个单词组成时，以中划线分割。

2.样式命名

  采用相应样式效果、功能描述的单词或缩写，不得包含汉字空格和特殊字符。

  （1）id命名：驼峰式命名法。建议尽量避免使用id作为样式控制。

  （2）class命名：小写英文&数字&-（中划线）来组合命名。

  （3）常规命名：命名中除众所周知的缩写外，尽量不采用缩写。

网页外层重要部分CSS样式命名：

   外套： wrap

   头部： header

   主要内容： main

   左侧： main-left

   右侧： main-right

   导航条： nav

   内容 ：content

   底部： footer

  常用的CSS命名规则

   侧栏：sidebar 

   栏目：column 

   左右中：left   right   center 

   登录条：loginbar 

   标志：logo 

   广告：banner 

   页面主体：main 

   热点：hot 

   新闻：news 

   下载：download 

   子导航：subnav 

   菜单：menu 

   子菜单：submenu 

   搜索：search 

   友情链接：friendlink 

   页脚：footer 

   版权：copyright 

   滚动：scroll 

   内容：content 

   标签：tags 

   文章列表：list 

   提示信息：msg 

   小技巧：tips 

   栏目标题：title 

   加入：joinus 

   指南：guide 

   服务：service 

   注册：regsiter 

   状态：status 

   投票：vote 

   合作伙伴：partner

3.其他

 （1）使用的类名应区别于用于js操作或其它用途的类名。

 （2）建议每行不得超过120个字符，除非单行不可分割。

三.注释规范

  1.统一采用 /**/，具体参照下方的写法。

  2.缩进与下一行的代码保持一致；可位于一个代码行的末尾，与代码间隔一个空格。

  3.css文件必须书写顶部注释，标明该文件隶属模块。

  4. 一个规则中有多条声明时，每条声明应独占一行；只有一条声明，整个规则可以写为一行。

四.使用规范

     引用规范：不要使用@import，在使用less时除外，less使用@import，需避免在css中生成@import代码

五.图片

    1.使用PNG格式时，使用场景为单色背景、图中主要颜色不超过3种的，应采用PNG-8编码保存。其它场合下，采用PNG-24保存。

    2.推荐单个图片体积在10kb以下时，应考虑在css中以base64编码内联提供，不单独提供图片文件。