MaintainableCSS 《可維護性 CSS》 --- 複用篇

複用

一般，Harry Roberts 所說的 DRY (Don't repeat yourself) 常常被曲解成永遠不要重複作通一件事。 但實際上這是不現實的，並且經常致使過度抽象，用太多的精力去過度優化代碼，最後得不償失。

過分抽象化代碼有多痛苦，在 語義篇 已經講過了，Mixins 也是一個問題。

同時咱們要去考慮抽象, 咱們怎麼辦呢？

如何複用 Style ？

一種作法是用逗號分隔符實現，例如：

.someThing,
.anotherThing {
    color: red;
}

這就是一個簡單的複用技術，關於其餘的複用技術，咱們會在模塊篇，狀態篇，修飾符篇討論。

有關 Mixins

就像工具類同樣，修改 mixins 後會自動做用到全部的實例。

同時 mixins 容易導致多個規則，多參數和多條件。這致使後期難以維護。

爲了下降複雜度，咱們會建立小粒度的 mixins ，例如，做用紅色文本 (red text) 。期初開起來不錯，可是這並不是是 red mixins 聲明，更像一個規則自己。color: red?

若是咱們須要在多個地方更新規則，搜索和替換就很是必要了，此外，當 red mixin 變爲 orange 時，其名稱都要更新。

因此，mixins 很不錯，咱們應該使用它，可是要明智地使用它。

有關 Performance

若是 css 超過了 100kb, 再進行盲目的 DRY ，收效就不是很大了，咱們要作的就是使 css 更小，才能使 HTML 更強大。

壓縮圖片能顯著提升性能。這就是我想表達的，解決其餘形式的冗餘能夠提升維護性和性能。

違反 DRY 的原則

例如，若是嘗試複用 float：left，就像在不一樣的 Javascript 對象中複用變量名，這也是不可取的。

最後總結

DRY 若是致使過分抽象和過分編程， 咱們會難以維護。全部，咱們不該該癡迷它的形式，而應該關注於複用具體的模塊。我會在之後章節中說明這些。