[轉載]CSS 創做指南（Beta）（css規範）

時間 2019-11-09

標籤轉載 css 指南 beta 規範欄目 CSS 简体版

原文原文鏈接

當年還在糾結各類規範的時候，不知道從哪裏翻到這個，就讓我脫離了css這個規範的苦海了。。。php

反正就是團隊和項目合做說的算，選擇合適的進行使用就能夠了，見到合適的文章，我也會轉載過來的css

來源html

https://github.com/cssdream/css-creating#indentationnode

yisiblgit

CSS 創做指南（Beta）

CSS 是一種領域語言（DSL），層疊與繼承賦予了 CSS 優雅多姿的無限創造力。正是因爲它如此「簡單」，咱們須要一些規範來使其變得更加可依賴。在使用 CSS 的時候不要把它當作一種編程語言，應該把它當作繪畫或者創做。因此本文檔不只僅是一份 CSS 書寫規範，更像是 CSS 創做的調色盤。github

「做爲成功的項目的一員，很重要的一點是意識到只爲本身寫代碼是很糟糕的行爲。若是將有成千上萬人使用你的代碼，那麼你須要編寫最具明確性的代碼，而不是以自個人喜愛來彰顯本身的智商。」
—— Idan Gazitweb

1、縮進與換行

用空格好仍是 TAB 好？4個空格仍是2個空格好？這是永遠的聖戰，累覺不愛，本文檔不作詳細說明。 vim

可是不管如何，項目中應該保持統一的縮進風格，以利於代碼的閱讀，同時能夠避免在 git 等版本管理工具中造成冗餘的 diff 信息，並且千萬不要空格和製表符（TAB）混用。瀏覽器

本文檔規定：

使用2個空格縮進。
使用 Unix 風格換行符（LF） 保證跨平臺的一致性，更多。
刪除行尾多餘的空格
由於這些空格一般是沒必要要的（JSHint 中會經過 trailing 來檢測是否存在多餘的空格）。
文件末尾增長一個空行
沒有空行在合併多個文件時可能會把上一個文件的最後一行與下一個文件的第一行合併爲一行，特別是，JS 中若是沒有這個空行而恰巧末尾沒有寫分號，整個文件可能就會報錯了。

擴展閱讀：
- 爲何 C 語言源程序最後一行要是一個空行？
- Why should files end with a newline?

1. 如何保證統一的縮進風格？

Sublime Text 在新建工程的時候會生成 xxx.sumlime-project 文件，能夠配置一些基本縮進和排除目錄等，但遺憾的是沒法與其餘編輯器通用。

cube.css 中的示例：

{
  "folders": [{
    "path": ".",
    "folder_exclude_patterns": ["node_modules", "_site"] // 排除目錄
  }],
  "settings": {
    "tab_size": 4,
    "translate_tabs_to_spaces": true, // tab 轉換爲空格
    "ensure_newline_at_eof_on_save": true, // 保存時文件末尾自動增長一個空行
    "trim_trailing_white_space_on_save": true // 刪除行尾多餘的空格
  }
}

EditorConfig 是一個幫助開發者在不一樣的編輯器中保持統一編碼風格的插件，支持了大部分流行的編輯器。它包括兩部分：代碼風格規則定義(.editorconfig 文件)和支持此規則的編輯器插件。

2. 快速開始

在項目根目錄新建一個 .editorconfig 文件，保存爲 utf-8 格式。Windows 用戶因爲沒法直接新建一個只有擴展名的文件，新建的時候在末尾多加一個點便可（.editorconfig. ），也能夠在命令行（CMD）中使用 echo.>.editorconfig 來建立。

編輯 .editorconfig 文件

# css-creating coding style
root = true

# 爲全部文件設置風格
[*]
charset = utf-8
indent_style = space
indent_size = 2
end_of_line = lf
trim_trailing_whitespace = true
insert_final_newline = true

# 爲 Markdown 文件保留行尾空格
[*.md]
trim_trailing_whitespace = false

安裝編輯器插件

AppCode	Atom	Brackets	Code::Block
Emacs	Geany	Gedit	GitHub
inteltdJ	jEdit	Notepad++	PHPStorm
PyCharm	RubyMine	Subtdme Text	TextMate
Vim	Visual Studio	WebStorm

3. EditorConfig 文檔

通配符規則：

* 匹配任意字符串，但不包括 /

** 匹配任何字符串

? 匹配任何單字符

[name] 匹配任何括號中的單字符

[!name] 匹配任何非括號中的單字符

{s1,s2,s3} 匹配任何給出的多個字符串

說明：
- [] 匹配規則是從當前目錄算起。
- ? 只能匹配且必須有相似 f1.js、f2.js、f12.js 的文件，經過f??.js只能匹配到 f12.js，而f**.js能夠匹配到全部。
- {s1,s2,s3} 之間不能有空格。{f1.js, f2.js, f3.js} 沒法匹配f2.js 和 f3.js。
- * 和 ** 能夠匹配空字符串，例如 f*.js 能夠匹配到 f.js。
- 多個匹配之間的規則若是不衝突是能夠合併的。
- 優先級問題，若是兩個匹配所定義的規則衝突，則會以最靠近打開文件的`.editorconfig文件爲準。若是同一個文件中匹配定義衝突，則會以最後定義的爲準。因此在定義規則的時候，須先定義通用規則，後定義特殊規則。
屬性規則（全部屬性不區分大小寫）

屬性	值	說明
root	true, false	設置是不是當前項目的根目錄
indent_style	tab, space	設置縮進格式
indent_size	number	設置縮進大小
tab_width	number	設置 tab 表示的空格數，默認等於indent_size，無需設定
end_of_line	lf(Unix \n), cr(Mac OS \r), crlf(Windows \r\n)	設置行尾換行符格式
charset	atin1, utf-8, utf-8-bom, utf-16be, utf-16le 等	設置字符編碼
trim_trailing_whitespace	true, false	設置是否自動刪除行尾多餘空格
insert_final_newline	true, false	設置是否在保存文件時自動在行尾插入空行

2、註釋

良好的註釋使代碼更具備可讀性和可維護性，尤爲是多人協做的項目，不要讓團隊其餘成員來猜想一段代碼的意圖。

註釋風格應當相對簡潔，作以下規範：

區塊註釋放在單獨一行。
保持註釋內代碼的縮進。
爲了註釋文字更具備可讀性，合理控制每行的字數，推薦每行80個字符（40個漢字）之內。

提示：經過擴展 emmet 等工具（例如emmet-plus）能夠快速輸出統一的註釋風格。

CSS 文件中有以下幾種註釋：

1. 普通註釋，註釋文字左右各留一個空格。

/* 普通註釋 */

2. 區塊註釋

註釋橫線的長度爲80個字符，做爲換行參考。

一級區塊註釋

/* ==========================================================================
   一級區塊註釋
   ========================================================================== */

二級區塊註釋

/* --------------------------------------------------------------------------
   二級區塊註釋
   -------------------------------------------------------------------------- */

3. Doxygen 風格的註釋

每一個 CSS 文件的頭部或區塊的開始處應當包含 Doxygen 風格的註釋，以闡明該文件或這段代碼的做用、做者、最後更新時間等信息。

Doxygen 風格的註釋以 /** 開始，每行以 * 號開頭。

/**
 * Doxygen 風格的註釋示例
 * @file：    文件信息
 * @author:   一絲
 * @update:   2013-11-5
 * @note:     註解
 * @doc:      相關文檔
 *
 * 這裏是更詳細的描述，固然咱們要把字數控制在每行80個字符（40個漢字）之內。若是
 * 一行寫不下，須要另起一行。
 */

Doxygen 風格的註釋內若是包含其餘代碼，不寫開頭的 * 號，以方便複製代碼。

/**
 * Doxygen 風格的註釋包含代碼
 * 
 * 例如咱們能夠在註釋中嵌入 HTML 代碼，一樣保持代碼的縮進。
 *
  <div class="mod">
    <p>這個模塊名叫 mod</p>
  </div>
 */

4. CSS 預處理工具中的單行註釋

Sass， LESS， Stylus 中可使用單行註釋。

// 註釋內容

5. clean-css 等壓縮工具中的註釋

clean-css 是一個 CSS 壓縮工具，爲了保留 CSS 文件的版權信息等特殊需求，支持如下形式的註釋

/*!
  這裏是版權信息或者重要的註釋，壓縮後不會被刪除
*/

3、書寫格式

1. CSS文件頭部聲明 `@charset`

爲了不 HTML 和 CSS 文件編碼不一樣時形成中文解析亂碼，形成的沒必要要的麻煩，CSS 文件頭部統一加上文件對應的編碼，例如文件編碼爲 UTF-8 時：

@charset "UTF-8";
/* 開始書寫樣式 */

須要注意的是：

@charset 前面不能有任何字符。
@charset 必須出如今 CSS 文件的最開始。

注：在使用 SASS 時若是不指定 @charset 也可能形成亂碼。

2. 統一使用小寫。

字體名稱以及特殊的 CSS 屬性/值（translateX等）不要求強制小寫
顏色值若是是16進制，推薦小寫，更加容易辨識。
若是是關鍵字色值，推薦使用更加直觀的顏色關鍵字。

不推薦的寫法：

.Foo{
  BACKGROUND: #CCC;
  color: currentColor;
  border-color: #F00; /* 紅色 */
  transform: translateX(20px);
}

推薦的寫法：

.foo{
  background: #ccc;
  color: currentColor;
  border-color: red;
  transform: translateX(20px);
}

3. 保持空格

規則集的左大括號前保留一個空格
屬性值前增長個空格(使用 Emmet 會自動生成這個空格)
逗號後面保留一個空格。

合理的空白（空格）能夠更好的閱讀代碼，最終推薦的效果以下：

.selector {
  width: 200px;
  font-size: 22px;
  color: rgba(0, 0, 0, .5);
  transition: color .3s, width .5s cubic-bezier(.6, 0, .2, 1);
  transform: matrix(0, 1, 1, 1, 10, 10);
}

4. 每一個聲明前保留一級縮進

不推薦的寫法：

h3 {
font-weight: bold;
}

推薦的寫法：

h3 {
  font-weight: bold;
}

5. 右大括號保持與該規則集第一個字符對齊

不推薦的寫法：

h3{
  font-weight: bold;
  }

推薦的寫法：

h3 {
  font-weight: bold;
}

6. 多個選擇器和聲明都獨佔一行

不推薦的寫法：

h1, h2, h3 {
  font-weight: normal; line-height: 1.5;
}

推薦的寫法：

h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.5;
}

7. 每一個規則集之間保留一個空行

不推薦的寫法：

.selector1 {
  display: block;
  width: 100px;
}
.selector2 {
  padding: 10px;
  margin: 10px auto;
}

推薦的寫法：

.selector1 {
  display: block;
  width: 100px;
}

.selector2 {
  padding: 10px;
  margin: 10px auto;
}

4、細節美化

1. 選擇器內只有一個聲明時能夠寫在一行。

這樣可使得代碼顯得更加緊湊，注意保持空格。

h1 { font-size: 32px; }

h2 { font-size: 26px; }

h3 { font-size: 22px; }

2. 包含多個前綴的聲明不強制對齊。

一般能夠寫做這樣：

.selector {
  -webkit-transition: .3s ease;
  -moz-transition: .3s ease;
  -ms-transition: .3s ease;
  -o-transition: .3s ease;
  transition: .3s ease;
}

若是使用 CSS 預處理器或後處理器，推薦以冒號對齊，使代碼更加美觀。autoprefixer 中默認開啓這種風格，請保證 cascade 參數爲 true。

.selector {
  -webkit-transition: .3s ease;
     -moz-transition: .3s ease;
      -ms-transition: .3s ease;
       -o-transition: .3s ease;
          transition: .3s ease;
}

3. 較長的屬性值推薦放在多行，屬性值開頭保持一級縮進。

好比多個box-shadow 和背景漸變等，這有助於提升代碼的可讀性，且易於生成有效的 Diff。

.selector {
  box-shadow: 
    1px 1px 5px #000,
    0 0 6px blue,
    2px 0 3px 5px #ccc inset;
  background-image:
    linear-gradient(to top right, green, blue),
    linear-gradient(to right, blue, red);
}

@media
  only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */
  only screen and (min--moz-device-pixel-ratio: 2), /* Firefox 16 以前 */
  only screen and (-webkit-min-device-pixel-ratio: 2), /* WebKit */
  only screen and (min-resolution: 192dpi), /* 不支持dppx的瀏覽器 */
  only screen and (min-resolution: 2dppx) /* 標準 */
{
  .selector {

  }
}

@font-face {
  font-family: 'FontName'; /* IE9 */
  src: url('FileName.eot');
  src:
    url('FileName.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('FileName.woff') format('woff'), /* Chrome,Firefox */
    url('FileName.ttf') format('truetype'), /* Chrome,Firefox,Opera,Safari,Android, iOS 4.2+ */
    url('FileName.svg#FontName') format('svg'); /* iOS 4.1- */
}

4. `@keyframes` 內的關鍵幀保留一級縮進。

@keyframes foo {
  50% {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
  }
}

5、省略

如無必要，省略 0 值單位。這些單位包括：
```
%|em|ex|ch|rem|vw|vh|vmin|vmax|cm|mm|in|pt|pc|px
```
如無必要，省略小數前面的 0。
如無必要，省略 url 中的引號。
省略 font-family 內中文字體名稱的引號。
不強制要求縮寫屬性，font，background，margin，推薦使用工具自動合併，好比 clean-css。
不強制要求縮寫顏色中的16進制寫法。
不要省略選擇器內最後一個聲明末尾的分號。
多人協做時，若是他人新增了其餘代碼極可能沒有注意到上一行末尾沒有寫分號，致使 CSS 解析錯誤。

不推薦的寫法：

.selector {
  display: block;
  width: 100px
}

推薦的寫法：

.selector {
  display: block;
  width: 100px;
}

6、縮寫

稍後更新……

7、書寫順序

1. 不強制要求聲明的書寫順序。

若是團隊規範有要求，建議使用工具來自動化排序，好比 CSScomb，或者使用 @wangjeaf 開發的 ckstyle 推薦以聲明的特性做爲分組，不一樣分組間保留一個空行，例如：

.dialog {
  /* 定位 */
  margin: auto;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;    

  /* 盒模型 */
  width: 500px;
  height: 300px;
  padding: 10px 20px;

  /* 皮膚 */
  background: #FFF;
  color: #333;
  border: 1px solid;
  border-radius: 5px;                      
}

2. 無前綴屬性必定要寫在最後

因爲 CSS 後面的屬性會覆蓋前面的，無前綴屬性寫在最後能夠保證瀏覽器一旦支持了，則用標準的無前綴屬性來渲染。

不推薦的寫法：

.foo {
  -webkit-border-radius: 6px;
  border-radius: 6px;
  -moz-border-radius: 6px;
}

推薦的寫法：

.foo {
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  border-radius: 6px; 
}

8、選擇器

1. 可使用 `*` 通用選擇器。

* 通用選擇器效率低是一個誤區，若有必要可使用。測試文章關於css通配符性能問題不徹底測試

例如：

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}

2. 不要在選擇器末尾使用 `*` 通用選擇器。

CSS 選擇器匹配規則是從右往左，例如：

.mod .foo * {
  border-radius: 6px;
}

3. 若是是頁面惟一的元素請使用 ID 選擇器。

引用爲後代選擇器和ID選擇器而辯護

我一直以來所主張的使用 id 的方式，其實就是 HTML5 新增元素的前身。2000 年時，咱們沒有 footer 元素，爲了給該div中的內容賦以結構上的意義，咱們這樣寫：div id="footer"。今天，根據人們訪問咱們網站所用的瀏覽器和設備，咱們能夠選擇用 HTML5 的 footer 元素替代老方式。但如果咱們不能使用 HTML5 元素，使用 id 也沒有什麼不對的。

但應避免使用多個 ID 選擇器。

不推薦的寫法：

#header #search {
  float: right;
}

推薦的寫法：

#search {
  float: right;
}

4. 避免重複修飾選擇器

在必定意義上，這會下降選擇器性能。

不推薦的寫法：

div#search {
  float: right;
}

ul.nav {
  overflow: hidden;
}

推薦的寫法：

#search {
  float: right;
}

.nav {
  overflow: hidden;
}

9、字體

10、其餘

若是須要 CSS Hacks，需詳細註明解決什麼問題。
儘可能避免使用 IE 中的 CSS filters。
統一使用雙引號「""」,如content: ""。
選擇器中的屬性值也加上雙引號，如input[type="checkbox"]。
font-weight普通字重使用normal，加粗使用bold。大部分字體只有兩個字重，因此
不建議使用容易混淆的數值表示方法。
如無特別精確的要求，推薦使用不帶單位的line-height，這樣當前元素的行高只與自身font-size成比例關係，使排版更加靈活。例如line-height:1.5 line-height: 1.5 ≠ line-height: 150%

<div class="box">
  <p>line-height</p>
</div>

.box {
  line-height: 50px;
  font-size: 20px;  
}
/**
 * 這裏 p 的行高直接繼承父元素的行高，最終
   p { line-height: 50px; }
 */
p {
  font-size: 40px;
}

.box {
  line-height: 150%;
  font-size: 20px;  
}
/**
 * p 的行高計算過程爲：
 * 1. 先計算出父元素的行高（150% * 20px = 30px）
 * 2. 而後 p 繼承父元素的行高，最終
   p { line-height: 30px; }
 */
p {
  font-size: 40px;
}

.box {
  line-height: 1.5;
  font-size: 20px;  
}
/**
 * p 的行高計算過程爲：
 * 1. 先繼承父元素的 1.5（1.5 * 40px = 60px）
 * 2. 而後乘以 p 的 font-size，最終
   p { line-height: 60px; }
 */
p {
  font-size: 40px;
}

11、預處理工具

不一樣的 CSS 預處理工具備着不一樣的特性、功能以及語法。編碼習慣應當根據使用的預處理工具進行擴展，以適應其特有的功能。推薦在使用 SCSS 時遵照如下指導。

將嵌套深度限制在1級。對於超過2級的嵌套，給予從新評估。這能夠避免出現過於詳實的 CSS 選擇器。
避免大量的嵌套規則。當可讀性受到影響時，將之打斷。推薦避免出現多於20行的嵌套規則出現。
始終將@extend語句放在聲明塊的第一行。
若是能夠的話，將@include語句放在聲明塊的頂部，緊接着@extend語句的位置。
考慮在自定義函數的名字前加上x-或其它形式的前綴。這有助於避免將本身的函數和 CSS 的原生函數混淆，
或函數命名與庫函數衝突。

.selector {
  @extend .other-rule;
  @include clearfix();
  @include box-sizing(border-box);
  width: x-grid-unit(1);
  // 其餘聲明
}

12、後處理工具

待更新……

十3、代碼組織

待更新……

十4、構建部署

待更新……

許可

MIT License

新浪微博： http://weibo.com/jieorlin/

1. 【轉載】CSS規範
2. 前端CSS規範整理_轉載、、、
3. 【轉載】前端CSS規範整理
4. CSS團隊協做規範
5. CSS編碼規範(轉)
6. 寫做規範指南
7. CSS規範
8. css規範
9. css規範 - bem
10. DOM、CSS 規範
更多相關文章...
• CSS 指南 - 網站建設指南
• jQuery Mobile CSS 類 - jQuery Mobile 教程
• 算法總結-雙指針
• 使用阿里雲OSS+CDN部署前端頁面與加速靜態資源

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

[轉載]CSS 創做指南（Beta）（css規範）

CSS 創做指南（Beta）

目錄

1、縮進與換行

1. 如何保證統一的縮進風格？

2. 快速開始

3. EditorConfig 文檔

2、註釋

1. 普通註釋，註釋文字左右各留一個空格。

2. 區塊註釋

3. Doxygen 風格的註釋

4. CSS 預處理工具中的單行註釋

5. clean-css 等壓縮工具中的註釋

3、書寫格式

1. CSS文件頭部聲明 @charset

2. 統一使用小寫。

3. 保持空格

4. 每一個聲明前保留一級縮進

5. 右大括號保持與該規則集第一個字符對齊

6. 多個選擇器和聲明都獨佔一行

7. 每一個規則集之間保留一個空行

4、細節美化

1. 選擇器內只有一個聲明時能夠寫在一行。

2. 包含多個前綴的聲明不強制對齊。

3. 較長的屬性值推薦放在多行，屬性值開頭保持一級縮進。

4. @keyframes 內的關鍵幀保留一級縮進。

5、省略

6、縮寫

7、書寫順序

1. 不強制要求聲明的書寫順序。

2. 無前綴屬性必定要寫在最後

8、選擇器

1. 可使用 * 通用選擇器。

2. 不要在選擇器末尾使用 * 通用選擇器。

3. 若是是頁面惟一的元素請使用 ID 選擇器。

4. 避免重複修飾選擇器

9、字體

10、其餘

11、預處理工具

12、後處理工具

十3、代碼組織

十4、構建部署

許可

1. CSS文件頭部聲明 `@charset`

4. `@keyframes` 內的關鍵幀保留一級縮進。

1. 可使用 `*` 通用選擇器。

2. 不要在選擇器末尾使用 `*` 通用選擇器。