编码规范-css.md

写在前面

对于不同的编程语言来说,具体的编码规范各不相同,但是其宗旨都是一致的,就是保证代码在高质量完成需求的同时具备良好的可读性、可维护性。

本文大部分内容来自网上,仅供参考学习!

网络上的知识浩如烟海,而学到了才是自己的!!
然后,老规矩,带上我们可爱的小伙伴…
《编码规范-css.md》

语法

  • 用两个空格来代替制表符(tab) — 这是唯一能保证在所有环境下获得一致展现的方法。

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

  • 为了代码的易读性,在每个声明块的左花括号前添加一个空格。

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

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

  • 为了获得更准确的错误报告,每条声明都应该独占一行。

  • 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的,但是,如果省略这个分号,你的代码可能更易出错。

  • 对于以逗号分隔的属性值,每个逗号后面都应该插入一个空格(例如,box-shadow)。

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

  • 对于属性值或颜色参数,省略小于 1 的小数前面的 0 (例如,.5 代替 0.5;-.5px 代替 -0.5px)。

  • 十六进制值应该全部小写,例如,#fff。在扫描文档时,小写字符易于分辨,因为他们的形式更易于区分。

  • 尽量使用简写形式的十六进制值,例如,用 #fff 代替 #ffffff。

  • 为选择器中的属性添加双引号,例如,input[type=”text”]。只有在某些情况下是可选的,但是,为了代码的一致性,建议都加上双引号。

  • 避免为 0 值指定单位,例如,用 margin: 0; 代替 margin: 0px;。

      /* Bad CSS */
      .selector, .selector-secondary, .selector[type=text] {
        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
      }
    
      /* Good CSS */
      .selector,
      .selector-secondary,
      .selector[type="text"] {
        padding: 15px;
        margin-bottom: 15px;
        background-color: rgba(0,0,0,.5);
        box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
      }

声明顺序

CSS属性的排列顺序,相关的属性声明应当归为一组,并按照顺序排列.

  1. Positioning
    定位:放首位. 定位可以从正常的文档流中移除元素,并且还能覆盖盒模型(box model)相关的样式

  2. Box model
    盒子模型:决定了组件的尺寸和位置。

  3. Typographic
    字体排印:文字显示相关

  4. Visual
    可视化:颜色可视化

      .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 */
        opacity: 1;
      }

    Tips :
    参考网址 : 完整的属性列表及其排列顺序请参考Recess

带前缀的属性

当使用特定厂商的带有前缀的属性时,通过缩进的方式,让每个属性的值在垂直方向对齐,这样便于多行编辑。

在 Textmate 中,使用 Text → Edit Each Line in Selection 。在 Sublime Text 2 中,使用 Selection → Add Previous Line 和 Selection → Add Next Line 。

简写形式的属性声明

在需要显示地设置所有值的情况下,应当尽量限制使用简写形式的属性声明.过度使用简写形式会导致代码混乱,并且会对属性值带来不必要的覆盖,从而引起意外的副作用。

  /* Bad example */
  .element {
    margin: 0 0 10px;
    background: red;
    background: url("image.jpg");
    border-radius: 3px 3px 0 0;
  }

  /* Good example */
  .element {
    margin-bottom: 10px;
    background-color: red;
    background-image: url("image.jpg");
    border-top-left-radius: 3px;
    border-top-right-radius: 3px;
  }

单行规则声明

只包含一条声明的样式,为了易读性和便于快速编辑,建议将语句放在同一行。
对于带有多条声明的样式,还是应当将声明分为多行。

  /* Single declarations on one line */
  .span1 { width: 60px; }
  .span2 { width: 140px; }
  .span3 { width: 220px; }

  /* Multiple declarations, one per line */
  .sprite {
    display: inline-block;
    width: 16px;
    height: 15px;
    background-image: url(../img/sprite.png);
  }
  .icon           { background-position: 0 0; }
  .icon-home      { background-position: 0 -20px; }
  .icon-account   { background-position: 0 -40px; }

class 命名

  • class 名称中只能出现小写字符和破折号(dashe)(不是下划线,也不是驼峰命名法)。破折号应当用于相关 class 的命名(类似于命名空间)(例如,.btn 和 .btn-danger)。

  • 避免过度任意的简写。.btn 代表 button,但是 .s 不能表达任何意思。

  • class 名称应当尽可能短,并且意义明确。

  • 使用有意义的名称。使用有组织的或目的明确的名称,不要使用表现形式(presentational)的名称。

  • 基于最近的父 class 或基本(base) class 作为新 class 的前缀。

  • 使用 .js-* class 来标识行为(与样式相对),并且不要将这些 class 包含到 CSS 文件中。

      /* Bad example */
      .t { ... }
      /* Good example */
      .tweet-header { ... }

选择器

  • 对于通用元素使用 class ,这样利于渲染性能的优化。

  • 对于经常出现的组件,避免使用属性选择器(例如,[class^=”…”])。浏览器的性能会受到这些因素的影响。

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

  • 只有在必要的时候才将 class 限制在最近的父元素内(也就是后代选择器)(例如,不使用带前缀的 class 时 — 前缀类似于命名空间)。

样式的优先级

一般情况下:

(外部样式)External style sheet <(内部样式)Internal style sheet <(内联样式)Inline style

但是下面的这种除外.则外部样式将覆盖内部样式。

  <head>
      <style type="text/css">
        /* 内部样式 */
        h3{color:green;}
      </style>

      <!-- 外部样式 style.css -->
      <link rel="stylesheet" type="text/css" href="style.css"/>
      <!-- 设置:h3{color:blue;} -->
  </head>
  <body>
      <h3>测试!</h3>
  </body>

选择器的优先权

《编码规范-css.md》
解释:

  1. 内联样式表的权值最高 1000;

  2. ID 选择器的权值为 100

  3. Class 类选择器的权值为 10

  4. HTML 标签选择器的权值为 1

利用选择器进行计算,如下:

  <html>
    <head>
      <style type="text/css">
          #redP p {
               /* 权值 = 100+1=101 */
               color:#F00;  /* 红色 */
          }

          #redP .red em {
               /* 权值 = 100+10+1=111 */
               color:#00F; /* 蓝色 */

          }

          #redP p span em {
               /* 权值 = 100+1+1+1=103 */
               color:#FF0;/*黄色*/
          }
      </style>
    </head>
    <body>
       <div id="redP">
          <p class="red">red
             <span><em>em red</em></span>
          </p>
          <p>red</p>
       </div>
    </body>
  </html>

结果: 标签内的数据显示为蓝色。

CSS优先法则

  1. 选择器都有一个权值,权值越大越优先;

  2. 当权值相等时,后出现的样式表设置要优于先出现的样式表设置;

  3. 创作者的规则高于浏览者:即网页编写者设置的CSS 样式的优先权高于浏览器所设置的样式;

  4. 继承的CSS 样式不如后来指定的CSS 样式;

  5. 在同一组属性设置中标有“!important”规则的优先级最大;

编辑器设置

对编辑器设置相同配置,以避免常见的代码不一致和差异:

  • 用两个空格代替制表符(soft-tab 即用空格代表 tab 符)。

  • 保存文件时,删除尾部的空白符。

  • 设置文件编码为 UTF-8。

  • 在文件结尾添加一个空白行。

    # editorconfig.org
    
    root = true
    
    [*]
    charset = utf-8
    end_of_line = lf
    indent_size = 2
    indent_style = space
    insert_final_newline = true
    trim_trailing_whitespace = true
    
    [*.md]  
    trim_trailing_whitespace = false
    [*.py]
    indent_size = 4

浏览器的渲染机制

  1. DNS

  2. 服务器解析,请求数据库

  3. 解析数据,生成html文件, http response返回

  4. 浏览器解析http response

  5. 下载html , css , js

CSS hack

IE:6.0+,FireFox:2.0+,Opera 10.0+,Sarari 3.0+,Chrome

注意事项

  • 注释
    请确保你的代码能够自描述、注释良好并且易于他人理解。

其他

参考网址
Recess
BootCSS编码规范
CSS 的优先级机制
浏览器~加载,解析,渲染
CSS Hack
CSS标签

    原文作者:fania
    原文地址: https://segmentfault.com/a/1190000010517455
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞