為什么80%的碼農都做不了架構師？>>> ??

1. 通用原則

“作為成功的項目的一員，很重要的一點是意識到只為自己寫代碼是很糟糕的行為。如果將有成千上萬人使用你的代碼， 那么你需要編寫最具明確性的代碼，而不是以自我的喜好來彰顯自己的智商。” - Idan Gazit

• 在任何代碼庫中，無論有多少人參與及貢獻，所有代碼都應該如同一個人編寫的一樣。
• 嚴格執行一致認可的風格。
• 如果有疑義，則使用現有的、通用的模式。

2. 空格

在項目的所有代碼中，應該只有一個風格。在空格的使用上，必須始終保持一致。使用空格來提高可讀性。

• *永遠不要*在縮進時混用空格和TAB。
• 在軟縮進（使用空格）和真正的TAB間選擇其一。并始終堅持這一選擇。（推薦使用空格）
• 如果使用空格進行縮進，選擇每個縮進所使用的空格數。（推薦：4個空格）

提示：將編輯器配置為“顯示不可見內容”。這使你可以清除行尾的空格和不需要縮進的空行里的空格，同時可以避免對注釋的污染。

3. 注釋

良好的注釋是非常重要的。請留出時間來描述組件（component）的工作方式、局限性和構建它們的方法。不要讓你的團隊其它成員 來猜測一段不通用或不明顯的代碼的目的。

注釋的風格應當簡潔，并在代碼庫中保持統一。

• 將注釋放在主題上方并獨占一行。
• 避免在行未放置注釋。
• 控制每行長度在合理的范圍內，比如80個字符。
• 使用注釋從字面上將CSS代碼分隔為獨立的部分。
• 注釋的大小寫應當與普通句子相同，并且使用一致的文本縮進。

提示：通過配置編輯器，可以提供快捷鍵來輸出一致認可的注釋模式。

CSS示例：

/* ================================================================區塊注釋段============================================================== *//* 子區塊注釋段============================================================= *//** 分組注釋段* 用于多行的釋義或文檔。*//* 基本注釋 */

SCSS示例：

// ============================================================== // 區塊注釋段 // ==============================================================// 子區塊注釋段 // ==============================================================// // 分組注釋段 // 用于多行的釋義或文檔。 //// 基本注釋

4. 格式

最終選擇的代碼風格必須保證：易于閱讀，易于清晰地注釋，最小化無意中引入錯誤的可能性，可生成有用的diff和blame。

在多個選擇器的規則集中，每個單獨的選擇器獨占一行。

在規則集的左大括號前保留一個空格。

在聲明塊中，每個聲明獨占一行。

每個聲明前保留一級縮進。

每個聲明的冒號后保留一個空格。

對于聲明塊的最后一個聲明，始終保留結束的分號。

規則集的右大括號保持與該規則集的第一個字符在同一列。

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

.selector-1, .selector-2, .selector-3 {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;display: block;color: #333;background: #fff; }

聲明順序

樣式聲明的順序應當遵守一個單一的原則。我的傾向是將相關的屬性組合在一起，并且將對結構來說比較重要的屬性（如定位或者盒模型） 放在前面，先于排版、背景及顏色等屬性。

.selector {position: relative;display: block;width: 50%;height: 100px;padding: 10px;border: 0;margin: 10px;color: #fffbackground: #000; }

按字母排序也非常流行，但是這種做法存在一個缺點，即會將相關的屬性分開。例如定位偏移量會無法放在一起，盒模型相關的屬性會四散分布在一個聲明塊中。

例外及細微偏移原則的情況

對于大量僅包含單條聲明的聲明塊，可以使用一種略微不同的單行格式。在這種情況下，在左大括號之后及右大括號之前都應該保留一個空格。

.selector-1 { width: 10%; } .selector-2 { width: 20%; } .selector-3 { width: 30%; }

對于以逗號分隔并且非常長的屬性值 -- 例如一堆漸變或者陰影的聲明 -- 可以放在多行中，這有助于提高可讀性，并易于生成有效的diff。這種情況下有多 種格式可以選擇，以下展示了一種格式。

.selector {box-shadow:1px 1px 1px #000,2px 2px 1px 1px #ccc inset;background-image:linear-gradient(#fff, #ccc),linear-gradient(#f3c, #4ec); }

雜項

• 在十六進制值中，使用小寫，如#aaa。
• 單引號或雙引號的選擇保持一致。推薦使用雙引號，如content: ""。
• 對于選擇器中的屬性值也加上引號，如input[type="checkout"]。
• *如果可以的話*，不要給0加上單位, 如margin: 0。

預處理：格式方面額外的考慮

不同的CSS預處理有著不同的特性、功能以及語法。編碼習慣應當根據使用的預處理程序進行擴展，以適應其特有的功能。推薦在使用SCSS時遵守以下指導。

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

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

5. 命名

不要試著把自己當作編譯器或者預處理器，因此命名的時候盡量采用清晰的、有意義的名字。另外，對于 html文件和css文件中的代碼，盡量采用一致的命名規則。

/* 沒有意義的命名 */ .s-scr {overflow: auto; } .cb {background: #000; }/* 比較有意義的命名方式 */ .is-scrollable {overflow: auto; } .column-body {background: #000; }

6. 實例

下面是含有上述約定的示例代碼：

/* ==========================================================================Grid layout========================================================================== *//** HTML代碼示例:** <div class="grid">* <div class="cell cell-5"></div>* <div class="cell cell-5"></div>* </div>*/.grid {overflow: visible;height: 100%;/* Prevent inline-block cells wrapping */white-space: nowrap;/* Remove inter-cell whitespace */font-size: 0; }.cell {box-sizing: border-box;position: relative;overflow: hidden;width: 20%;height: 100%;/* Set the inter-cell spacing */padding: 0 10px;border: 2px solid #333;vertical-align: top;/* Reset white-space */white-space: normal;/* Reset font-size */font-size: 16px; }/* Cell states */.cell.is-animating {background-color: #fffdec; }/* Cell dimensions========================================================================== */.cell-1 { width: 10%; } .cell-2 { width: 20%; } .cell-3 { width: 30%; } .cell-4 { width: 40%; } .cell-5 { width: 50%; }/* Cell modifiers========================================================================== */.cell--detail, .cell--important {border-width: 4px; }

7. 代碼組織

對于css代碼庫來說，如何組織代碼文件是很重要的，尤其對于那些很大的代碼庫顯得更加重要。這里介紹 幾個組織代碼的建議：

• 邏輯上對不同的代碼進行分離。
• 不同的組件(component)的css盡量用不同的css文件（可以在build階段用工具合并到一起）
• 如果用到了預處理器（比如less），把一些公共的樣式代碼抽象成變量，例如顏色，字體等等。

8. 構建及部署

任何一個項目，都應該有一個build的過程，在這個階段我們可以通過工具對代碼進行檢測，測試，壓縮等等，還 可以為生產環境準備好帶有版本號的代碼。在這里我推薦一下grunt這個工具，我感覺它很不錯。

轉載于:https://my.oschina.net/hchen/blog/63032

總結

以上是生活随笔為你收集整理的编写统一、符合习惯的CSS的原则的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。