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等)。
  总结:建议遵循 布局定位属性-->自身属性-->文本属性-->其他属性。
 

2.属性用法规范

 (1)缩进:建议使用4个空格做为一个缩进层级。
 (2)非特殊场景尽量少使用!important,如果使用须添加必要的注释。
 (3)属性定义必须另起一行,且属性定义后以分号结尾。
 (4)选择器与"{"之间必须包含空格;属性名与之后的":"之间不允许包含空格;":"与属性值之间必须包含空格。
 (5)尽量少使用将样式的定义写在标签中(如内联样式:style="color:red;"),也不要用js为元素添加内联样式。
 

3.属性简写

  属性可以简写时,强制采用简写方式,可以精简代码且提高阅读体验。
(1)如padding,margin,font,color等等
(2)小数点前面的'0'建议去除
(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编码内联提供,不单独提供图片文件。
原文地址:https://www.cnblogs.com/sunflower-zy/p/9814527.html