前端编码规范之CSS规范

通用规范

• 省略 图片、样式、脚本以及其他媒体文件 URL 的协议部分（http:,https:），除非文件在两种协议下都不可用。

  这种方案称为 protocol-relative URL，好处是无论你是使用 HTTPS 还是 HTTP,访问页面，浏览器都会以相同的协议请求页面中的资源，同时可以节省一部分字节。

  – Example –

  -html
  
  <script src="https://example.com/example.js">script>
  
  
  <script src="//example.com/example.js">script>
  

  -css
  /* 不推荐 */
  .example {
    background: url("https://example.com/example.png");
  }
  
  /* 推荐 */
  .example {
    background: url("//example.com/example.png");
  }
  

CSS规范

• CSS文件名称规范

  • 使用小写英文、-、_（-不能开头）组合成文件名。

    大多 Web 服务器 (Apache, Unix) 对大小写敏感： london.css 不能通过 London.css 访问。
    其他 Web 服务器 (Microsoft, IIS) 对大小写不敏感： london.css 可以通过 London.css 或 london.css 访问。
    你必须保持统一的风格，建议统一使用小写的文件名。

• CSS文件后缀规范

  • 统一使用.css为文件后缀。

• CSS格式规范

  • 缩进：用两个空格来代替制表符（tab）。

    这是唯一能保证在所有环境下获得一致展现的方法。（包含HTML和css）

  • 为选择器分组时，将单独的选择器单独放在一行。

    – Example –

    -css
    /* 不推荐 */
    .selector, .selector-secondary, .selector[type=text] {
      padding: 15px;
    }
    
    /* 推荐 */
    .selector,
    .selector-secondary,
    .selector[type="text"] {
      padding: 15px;
    }
    

  • 每个声明块的左花括号前添加一个空格 - 。

    为了代码的易读性

    – Example –

    -css
    /* 不推荐 */
    .selector{
      padding: 15px;
    }
    
    /* 推荐 */
    .selector {
      padding: 15px;
    }
    

  • 声明块的右花括号应当单独成行。

    – Example –

    -css
    /* 不推荐 */
    .selector {padding: 15px;margin: 0px 0px 15px;background-color: rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF;}
    
    /* 推荐 */
    .selector {
      padding: 15px;
      margin: 0px 0px 15px;
      background-color: rgba(0, 0, 0, 0.5);
      box-shadow: 0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF;
    }
    

  • 每条声明语句的 : 后应该插入一个空格。

    – Example –

    -css
    /* 不推荐 */
    .selector {
      padding:15px;
    }
    
    /* 推荐 */
    .selector {
      padding: 15px;
    }
    

  • 每条声明都应该独占一行。

    为了获得更准确的错误报告和易读性。
    简洁样式可独占一行,但 {后 和 }前 必须空一格。

    – Example –

    -css
    /* 不推荐 */
    .selector {padding: 15px;margin: 0px 0px 15px;background-color: rgba(0, 0, 0, 0.5);box-shadow: 0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF;}
    
    /* 推荐 */
    .selector {
      padding: 15px;
      margin: 0px 0px 15px;
      background-color: rgba(0, 0, 0, 0.5);
      box-shadow: 0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF;
    }
    .selector { padding: 15px; }
    

  • 所有声明语句都应当以分号结尾。

    关于最后一条声明，大多数是会省略分号。为了保持一致，强烈建议最后一条声明也加上分号。

  • 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格。

    – Example –

    -css
    /* 不推荐 */
    .selector {
      font-family: Arial,sans-serif;
    }
    
    /* 推荐 */
    .selector {
      font-family: Arial, sans-serif;
    }
    

  • 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。

    – Example –

    -css
    /* 不推荐 */
    .selector {
      background-color: rgba(0, 0, 0, 0.5);
    }
    
    /* 推荐 */
    .selector {
      background-color: rgba(0,0,0,.5);
    }
    

  • 对于属性值或颜色参数，省略小于 1 的小数点前面的 0 。

    – Example –

    -css
    /* 不推荐 */
    .selector {
      margin-top: 0.5px;
    }
    
    /* 推荐 */
    .selector {
      margin-top: .5px;
    }
    

  • 十六进制值应该全部小写,并且尽量使用简写形式的十六进制值。

    在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

    – Example –

    -css
    /* 不推荐 */
    .selector {
      color: #FFF;
      background-color: #ffffff;
    }
    
    /* 推荐 */
    .selector {
      color: #fff;
      background-color: #fff;
    }
    

  • 为选择器中的属性添加双引号。

    – Example –

    -css
    /* 不推荐 */
    .selector[type=text] {
      padding: 15px;
    }
    
    /* 推荐 */
    .selector[type="text"] {
      padding: 15px;
    }
    

  • 属性值使用单引号，URI的值不需要引号。

    – Example –

    -css
    /* 不推荐 */
    .selecto {
      font-family: "open sans", arial, sans-serif;
      background-image: url("//www.example.com/example.png");
    }
    
    /* 推荐 */
    .selector {
      font-family: 'open sans', arial, sans-serif;
      background-image: url(//www.example.com/example.png);
    }
    

  • 避免为 0 值指定单位。

    – Example –

    -css
    /* 不推荐 */
    .selector {
      padding: 0px;
    }
    
    /* 推荐 */
    .selector {
      padding: 0;
    }
    

• CSS声明顺序

  相关的属性声明应当归为一组，并按照下面的顺序排列：

  1. Positioning（定位，如position，top，z-index）
  2. Box model（盒模型，如display，box-sizing，width，border）
  3. Typography（排版，如font，line-height，text-align）
  4. Visual（视觉，如background，color，opacity）
  5. Misc （其他，如cursor）

  每组声明必须空行隔开。
  由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部（inside）或者是不影响前两组属性，因此排在后面。

  – Example –

  -css
  .declaration-order {
    /* Positioning */
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 100;
  
    /* Box-model */
    display: block;
    float: right;
    width: 100px;
    height: 100px;
  
    /* Typography */
    font: normal 13px "Helvetica Neue", sans-serif;
    line-height: 1.5;
    color: #333;
    text-align: center;
  
    /* Visual */
    background-color: #f5f5f5;
    border: 1px solid #e5e5e5;
    border-radius: 3px;
  
    /* Misc */
    cursor: pointer;
  }
  

• CSS不要使用 @import

  与 标签相比，@import 指令要慢很多。

  – Example –

  -html
  
  <link rel="stylesheet" href="example.css">
  
  
  <style>
    @import url("example.css");
  style>
  

• 媒体查询（Media query）的位置

  将媒体查询放在尽可能相关规则的附近。
  不要将他们打包放在一个单一样式文件中或者放在文档底部。
  如果你把他们分开了，将来只会被大家遗忘。

  – Example –

  -css
  .element { ... }
  .element-avatar { ... }
  .element-selected { ... }
  
  @media (min-width: 480px) {
    .element { ...}
    .element-avatar { ... }
    .element-selected { ... }
  }
  

• 简写形式的属性声明

  大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的 heading 元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以。
  过度使用简写形式的属性声明会导致代码混乱，并且会对属性值带来不必要的覆盖从而引起意外的副作用。

  • 常见的滥用简写属性声明：

    1. padding
    2. margin
    3. font
    4. background
    5. border
    6. border-radius

  • 简写使用规则

    1. 当同一属性需设置2个或2个以上的值的时候，使用简写；否则，使用全写。

       有些开发者是当同一属性需设置全部属性值的时候，才使用简写；否则，使用全写
       简写属性声明及其行为(shorthand properties)

       – Example –

       -css
       /* 不推荐 */
       .selector {
         margin: 0 0 10px;
         border-top-left-radius: 3px;
         border-top-right-radius: 3px;
       }
       
       /* 推荐 */
       .selector {
         margin-bottom: 10px;
         border-radius: 3px 3px 0 0;
       }
       

• 注释

  • （必须）注释文案两头空格。

  • 单行注释。

    – Example –

    -css
    /* 单行注释。 */
    

  • 多行注释。

    注意：*号在同一列对齐

    – Example –

    -css
    /*
     * 多行注释
     */
    

  • 用注释把 CSS 分成各个部分。

    和下一模块必须空行隔开

    – Example –

    -css
    /* 选择器模块 */
    .selector {
      margin: 0 0 10px;
      border-top-left-radius: 3px;
      border-top-right-radius: 3px;
    }
    .selector .selector-option {
      margin: 0 0 10px;
    }
    
    /* 内容模块 */
    .content {
      margin-bottom: 10px;
      border-radius: 3px 3px 0 0;
    }
    

• 如果CSS可以做到，就不要使用JS

  让CSS做更多的事，减轻JS开发量。

  • 用CSS控制交互或视觉的变化，JS只需要更改className。
  • 利用CSS一次性更改多个节点样式，避免多次渲染，提高渲染效率。
  • 如果允许不兼容低版本浏览器，那么动画实现可以交给CSS。

• CSS字体单位

  • px像素（Pixel）：相对长度单位，像素px是相对于显示器屏幕分辨率而言的。
  • em：相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。
  • rem：相对长度单位，相对的只是HTML根元素。
  • vw：视窗(Viewport)宽度的百分，如果视窗宽度为1000px，那么50vw = 500px。
  • vh：窗口高度的百分，如果视窗高度为800px，那么50vh = 400px。

• 选择器

  • 对于通用元素使用 class 。

    这样利于渲染性能的优化。

    – Example –

    -css
    /* 不推荐 */
    span { margin-bottom: 10px; }
    
    /* 推荐 */
    .avatar { margin-bottom: 10px; }
    

  • 对于经常出现的组件，避免使用属性选择器（例如，[class^="..."]）。

    浏览器的性能会受到这些因素的影响。

  • 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

    – Example –

    -css
    /* 不推荐 */
    .page-container #stream .stream-item .tweet .tweet-header .username { margin-bottom: 10px; }
    
    /* 推荐 */
    .tweet-header .username { margin-bottom: 10px; }
    

• ID和class命名

  • CSS 命名规范。

    • 所有的命名用小写的英文单词、数字，数字不可开头且少用。
    • 长名称或词组建议使用-作为连接符，特殊情况下才使用_。
    • 不要滥用id选择器，按需使用。
    • 切勿使用拼音、中文拼音首字母缩写、驼峰命名（如：className）命名。
    • 使用单词缩写时，必须是通俗易懂或者团队中达成共识的缩写。

    – Example –

    -css
    /* 不推荐 */
    .toubu { ... }
    .toubu1 { ... }
    .tou_bu { ... }
    .touBu { ... }
    .css { ... }
    .div { ... }
    
    /* 推荐 */
    .header { ... }
    .sub-nav { ... }
    

  • 命名参考

    命名	说明
    wrapper	页面外围控制整体布局宽度
    container或content	容器,用于最外层
    layout	布局
    head, header	页头部分
    foot, footer	页脚部分
    nav	主导航
    sub-nav	二级导航
    menu	菜单
    sub-menu	子菜单
    side-bar	侧栏
    sidebar-l, sidebar-r	左边栏或右边栏
    main	页面主体
    tag	标签
    msg, message	提示信息
    tips	小技巧
    vote	投票
    friendlink	友情链接
    title	标题
    summary	摘要
    login-bar	登录条
    search-input	搜索输入框
    hot	热门热点
    search	搜索
    search-output	搜索输出和搜索结果相似
    search-bar	搜索条
    search-results	搜索结果
    copyright	版权信息
    branding	商标
    logo	网站LOGO标志
    site-info	网站信息
    site-info-legal	法律声明
    site-info-credits	信誉
    join-us	加入我们
    partner	合作伙伴
    service	服务
    regsiter	注册
    arr, arrow	箭头
    guild	指南
    site-map	网站地图
    list	列表
    home-page	首页
    sub-page	二级页面子页面
    tool, toolbar	工具条
    drop	下拉
    dorp-menu	下拉菜单
    status	状态
    scroll	滚动
    tab	标签页
    left, right, center	居左、中、右
    news	新闻
    download	下载
    banner	广告条(顶部广告条)

  • CSS命名方法论

    软件开发领域所有的工程问题，归根结底衍生自一个问题：代码量大了怎么办？
    对于 CSS 而言，因代码量增大导致的核心问题是命名冲突。
    解决命名冲突的方法论是模块化，围绕此方法论，演化出种种模块化方案。

    • OOCSS 方法论

      OOCSS 官网
      Object Oriented CSS：面向对象的CSS。是由Nicole Sullivan提出的css理论。

      • 使用原则
        1. 表现与结构分离
        2. 容器与内容分离

    • SMACSS 方法论

      SMACSS 官网
      SMACSS(发音"smacks")，全称Scalable and Modular Architecture for CSS。
      SMACSS是一个可扩展的，模块化的CSS架构。它不是一个CSS框架，而是一个指南，一个CSS设计的最佳实践。

      • 分类CSS规则

        1. Base（基础）

        Base（基础）样式定义了元素全局的默认样式

        2. Layout（布局）

        Layout（布局）将会把页面分成几个主要部分 — 不是导航或折叠面板等部分，而是真正的顶级划分

        3. Module（模块）

        Module（模块）是页面上可重用的小代码块，是单一布局的一部分

        4. State（状态）

        State（状态）规则是描述我们的模块在不同状态下显示外观的一种方式。
        我们需要有不同的行为去描述元素的隐藏、扩展或修改。

        5. Theme（主题）

        Theme（主题）定义了颜色、形状、边框、阴影还有其他等等.
        不要将 SMACSS 主题规则和基础规则混淆，基础规则定义了默认外观，类似于重置浏览器的默认设置，而主题规则定义了一组最终外观的样式，唯一的颜色方案。

    • BEM 方法论

      BEM 官网
      BEM是Block（块），Element（元素）和 Modifier（修饰符）的简称。
      BEM只是一个CSS类名命名规则，它不涉及CSS书写的结构。
      Element（元素）名加在__后面；Modifier（修饰符）名加在--后面。

      1. Block（块）

         封装一个独立的实体，它本身是有意义的。虽然块可以嵌套并相互交互，但在语义上它们是相等的；没有优先级或层次结构。没有DOM表示的整体实体(例如控制器或模型)也可以是块。

      2. Element（元素）

         一个 Block（块）的一部分，没有独立的意义。任何元素在语义上都与其 Block（块）相关联。

      3. Modifier（修饰符）

         Block（块）或Element（元素）上的标志。使用它们可以更改外观、行为或状态。

      • 优点

        1.让代码更加易读、易理解，让协作更加容易
        2.模块化:块样式永远不依赖于页面上的其他元素，因此你不会遇到级联问题。
        2.可重用性:以不同方式组合独立块，并智能地重用它们，减少了你必须维护的CSS代码量。

    • 选择适合的方案

      上述方案都可以在实际项目中进行单一使用，但是切勿在同一项目中一些页面使用OOCSS，一些一面使用BEM方法进行混合开发。
      个人推荐SMACSS + BEM的组合方式进行开发。SMACSS搭建项目CSS架构，BEM为CSS命名规范