[POST] Cleaning Up a CSS Codebase

[Rplus]

Cleaning Up a CSS Codebase
by Hugo Giraudel 2016-03-09
http://www.sitepoint.com/cleaning-up-a-css-codebase/

CSS 大師 Hugo 寫了篇文章在描述如何整理 CSS

1. Lint CSS / SCSS, & fix errors

第一，建議就先把舊 CSS 的 syntax 統一
這動作可以抓出一些莫名奇妙的錯誤與不必要的鬼東西

因為如果有使用 regex 來批次取代的話
那在 commit 修改時，要特別留意每個 diff 是修改目標

2. Structure

他的想法是以更工程的檔案結構來輔助撰寫更易維護的 SCSS
這邊提了幾個推薦的：SMACSS, 7-1, ITCSS
他寫的 sass-boilerplate 看樣子是用那個 7-1 的結構
而那個 ITCSS 的理念不錯，Specificity 與位置的關係非常合理

3. remove excess

這段意思就很簡單：去掉多餘的

但其實這段是最吃 CSS 經驗的一段
他也提到， CSS 蠻容易上手的
但通常要削到精簡，往往要精熟才知道要砍哪邊
這邊看得出他蠻不爽很多人不太理解 inherit, initial, currentColor 這幾個較隱性的 property

ps:
不要學他寫 currentcolor, 會不小心在 autoprefixer 栽坑的唷~ XD

這邊這句標題蠻趣味的~

「CSS is Clever, You Should Be Too.」

4. Git commit

他這段主要說的是，修改大型 CSS 而不出錯根本奇葩
我們所能做的就是紀錄好每次做的修改
一個 commit 專注修正一件事就好
不然會時要 revert 會發現 conflict 到想哭 XD

---

結語在說清 CSS 很麻煩的原因之一就是， CSS 很難測試
所以目前只能按步就班，慢慢推展~

_Good Luck!_

[Rplus]

話說我還是第一次看到 @import 這樣的寫法 XD

https://github.com/HugoGiraudel/sass-boilerplate/blob/master/stylesheets%2Fmain.scss

// 1. Configuration and helpers
@import
  'abstracts/variables',
  'abstracts/functions',
  'abstracts/mixins';

// 2. Vendors
@import
  'vendor/normalize';