編碼規範-css.md

時間 2019-11-08

標籤編碼規範 css.md css 欄目字符編碼简体版

原文原文鏈接

寫在前面

對於不一樣的編程語言來講，具體的編碼規範各不相同，可是其宗旨都是一致的，就是保證代碼在高質量完成需求的同時具有良好的可讀性、可維護性。css

本文大部份內容來自網上，僅供參考學習！html

網絡上的知識浩如煙海，而學到了纔是本身的！！
而後，老規矩，帶上咱們可愛的小夥伴...
git

語法

用兩個空格來代替製表符（tab） -- 這是惟一能保證在全部環境下得到一致展示的方法。github
爲選擇器分組時，將單獨的選擇器單獨放在一行。數據庫
爲了代碼的易讀性，在每一個聲明塊的左花括號前添加一個空格。編程
聲明塊的右花括號應當單獨成行。瀏覽器
每條聲明語句的 : 後應該插入一個空格。服務器
爲了得到更準確的錯誤報告，每條聲明都應該獨佔一行。網絡
全部聲明語句都應當以分號結尾。最後一條聲明語句後面的分號是可選的，可是，若是省略這個分號，你的代碼可能更易出錯。ssh
對於以逗號分隔的屬性值，每一個逗號後面都應該插入一個空格（例如，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屬性的排列順序,相關的屬性聲明應當歸爲一組，並按照順序排列.

Positioning
定位:放首位. 定位能夠從正常的文檔流中移除元素，而且還能覆蓋盒模型（box model）相關的樣式
Box model
盒子模型:決定了組件的尺寸和位置。
Typographic
字體排印:文字顯示相關

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>

選擇器的優先權

解釋：

內聯樣式表的權值最高 1000；
ID 選擇器的權值爲 100
Class 類選擇器的權值爲 10
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優先法則

選擇器都有一個權值，權值越大越優先；
當權值相等時，後出現的樣式表設置要優於先出現的樣式表設置；
創做者的規則高於瀏覽者：即網頁編寫者設置的CSS 樣式的優先權高於瀏覽器所設置的樣式；
繼承的CSS 樣式不如後來指定的CSS 樣式；
在同一組屬性設置中標有「!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