zoukankan      html  css  js  c++  java
  • 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编码内联提供,不单独提供图片文件。
  • 相关阅读:
    配置 L3 agent
    Why Namespace?
    虚拟 ​router 原理分析
    创建 router 连通 subnet
    用 config drive 配置网络
    cloud
    写在最前面
    使用apktool工具遇到could not decode arsc file的解决办法
    php-fpm优化
    解决官网下载jdk只有5k大小的错误
  • 原文地址:https://www.cnblogs.com/sunflower-zy/p/9814527.html
Copyright © 2011-2022 走看看