「CSS思惟」組件化VS原子化

廢話

從我兩個月前，在掘金髮第一篇文章到如今，關注數天天都在以致少20我的數的量持續增加，如今立刻就要突破1000大關了。但是本身卻斷更了好久了，想一想很對不起個人粉絲們（我是想當前端網紅想瘋了哈哈）。因而逼迫本身寫了一篇這篇，我一直想寫的文章。

我是一個愛折騰設計的前端，我進公司的職位也是「偏體驗的前端」。從這些標籤能夠看到我是一個以重構（「切圖仔」）出道的前端。我喜歡的是所見即所得的代碼體驗，而不是在一堆理不清道不明的代碼邏輯裏面去尋找出口（多是我邏輯性比較差）。

相信有不少熱愛重構的前端同窗，在目前組件化代碼橫行霸道的年代，會有種本身要被淘汰的焦慮。我以前也有這樣的焦慮，只是經歷了一些事情以後（就不告訴你發生了什麼），我如今焦慮的點變了，我焦慮的是，我要怎麼在一個不是我擅長的領域，去給那些和我思惟不同的同窗分享我認爲對的東西。

簡介

講了這麼多廢話，如今回到個人正題。

由於技術站的更新，咱們公司 M 站的項目，開始往 React 遷移。而後在對於 React 中 CSS 的使用方式上，我和一個同事有了很大的分歧。

我是一個很是推崇原子化使用 CSS 的人。我喜歡使用相似：

.dn{ display:block; }
.fs24{ font-size:24px; }
.pr{ position:relative; }
/*...*/複製代碼

這樣的方式去使用 CSS 樣式。和我角度不同的同事可能會更傾向於組件化的方式，相似：

.demo{
    position:relative;
    display:block;
    font-size:24px;
    /*...*/
}複製代碼

我第一次對於原子化這種 CSS 的方式有了解，是來自個人男神，張鑫旭的活字印刷CSS。後面在和同事爭論的時候，又查閱了不少的資料。發現可能用得最久也是一直在堅持作的，多是來自雅虎的「Atomic CSS」。他們在使用方式上有很大的差異，可是他們的原子化 CSS 的思惟是同樣的。

示例

這篇文章其實我主要是想經過一個例子（我真的是用盡了洪荒之力纔想出來的），來讓你們理解組件化和原子化的區別。

假設咱們有名爲「原子」和「組件」兩個機器人制造廠。

他們如今要同時競標一個製造3種機器人各50臺的項目。這3個機器人長這樣「 原諒我拙略的繪畫技巧 」：

而後兩個廠回去以後給到了以下的方案：

第一眼咱們看過去，咱們確定會以爲「組件廠」的整個設計乾淨整潔，而後「原子廠」這個亂七八糟的是個什麼鬼？

而後咱們再來看看他們的模具需求是什麼樣的：

在「組件廠」裏由於3個機器人的手是同樣的，因此他們並不須要作15（3*5）個組件，而只須要作10個組件就好。

對於 「原子廠」來講他們把組件拆分到了最小的單位，因此只須要9個組件。

而後若是咱們臨時須要再添加兩種機器人：

「組件廠」這邊由於有3個組件以前已經有了，因此這邊須要再增長6個組件。

「原子廠」這邊由於沒有橙色，因此這邊須要再增長一個橙色的原子組件。

我這幾個圖裏面，其實忽略了組件到總體的這個拼裝成本。對於「組件廠」來講，組件到總體每一個機器人須要拼接4次，而「原子廠」則須要拼接：14次（5*2+4）次。

你們若是把這個機器人，想象成咱們網頁中的模塊，這中間的顏色和形狀想象成咱們的CSS屬性，就能理解在咱們 CSS 的世界裏面，組件化和原子化是什麼樣的一種情況了。

在 @FateRiddle 同窗的文章 React拾遺：從10種如今流行的 CSS 解決方案談談個人最愛 （中）有提到，原子化的概念，是inline css一中簡寫方式，在組件化開發浪潮中才真正變得可行。

固然我講這個的目的不是要證實原子化的思惟比組件化的思惟更好。由於就我我的而言，我以爲「原子化」其實只是「組件化」的一種極導致用方式而已。在React CSS的寫法裏面，應該是一個能夠值得嘗試的方案。

這裏還有一篇從思惟方式，到項目經驗，到和網友鬥嘴等各個方面介紹「Rethinking CSS」的網頁，強烈推薦你們看一下。

解決方案

更新於 2019/10/22

名稱	NPM	github	CDN
@_nu/css-acss

講了這麼多，感受都只是空談理論。這邊我多年的使用經驗，總結的一個 ACSS 的 npm 類庫 @_nu/css-acss 供你們使用。

對於 ACSS, bootstrap, material-ui, github ... 都有相關的 類庫，而後整個 ** 類庫** 最完善的屬於 tailwindcss。固然他們都是基於 style-system 理論建立的。上手成本相對較高，且每每須要設計師的介入。

和這些項目相比，我這邊的方案，優勢在於簡單和極致的 CSS 開發體驗。簡單到整個邏輯只落點在命名規則，看完文檔 5 分鐘就會用，甚至徹底理解全部的邏輯。極致的 CSS 開發體驗，體如今熟悉這套規則以後，你會開始懷疑，你的手指速度慢於你思考 CSS 的速度。

固然爲了追求簡單和開發體驗這也是缺點，就是不夠完善，沒有處理相似 hover,focus... 等中間態，也沒有添加任何自定義的響應點。這部分須要你們基於本身項目和 命名規則 自由擴展。