React拾遺：從10種如今流行的 CSS 解決方案談談個人最愛 （中）

上篇 介紹了 React 如今流行的 CSS 解決方案。本篇就直接進入主題詳細講講我最喜歡的解決方式之一：tachyons

我的認爲，tachyons 適合小的、樣式不是重點的項目以及寫 Demo， 但這不表明不能用 tachyons 完成大項目和漂亮的主頁： 使用tachyons寫的項目詳見 tachyons.io/gallery/

0. 選擇標準

當你興奮地讀完文檔，在打算使用一個新 css 框架前，須要好好想清楚它是否在你的全部使用場景裏圓滿完成任務，我總結的幾點：

• 是否解決了React開發的痛點：局部css，動態css？
• 是否支持全部css甚至是sass用法？僞類,嵌套，動畫，媒體查詢？
• 是否兼容你須要使用的第三方UI庫？
• 是否能和純css，或者是其餘css框架很好共存，以備遇到特殊狀況能夠有方案B？
• 性能？大小？

1. tachyons

在個人經驗，只是瞥一眼文檔不多人會對 tachyons 上來就感冒的，真正感覺到它的魅力是在使用中。我是看了一段現實使用 tachyons 的視頻後 on board 的，和同事提起時，他們並不太熱衷，但在看我現場使用後立馬決定使用。

tachyons 不像以前全部的css框架，試圖提供不少組件規模的css類，它甚至沒有 btn 這樣的類。bootstrap等做爲css框架共享了框架的弊端：當你徹底在框架提供的方案內使用時一切輕鬆愉快，但一旦你但願定製化，等待你的是無盡的痛。彷彿與之走上徹底相反的道路，tachyons提供了極其細碎化的類，去看看 tachyons.io/components/，好比一個按鈕：

代碼以下：

<div class="ph3">
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib purple" href="#0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib light-purple" href="#0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib hot-pink" href="#0">Button Text</a>
  <a class="f6 link dim br1 ba bw2 ph3 pv2 mb2 dib dark-pink" href="#0">Button Text</a>
</div>
複製代碼

拿第二行的class從左到右：分別爲 font-size:.875rem,去掉link的醜陋默認樣式，加上:hover淡化效果，border-radius 1 單位, 全border（border all），border寬度2單位，橫向padding 3單位，縱向padding 2單位，margin bottom 2單位，display:block，紫色。

原子類：

這就是 tachyons 的基本概念，極細化的「原子類」，帶來的好處是：

1. 源代碼極簡且易讀性極佳, 源代碼。
2. 14kB未壓縮的大小。記得以前寫項目管理系統，我試着用tachyons代替純css，改好後不只樣式更加統一了，而且css文件更小了
3. 定製化變得垂手可得：以上例，想邊寬一點 bw3 便可。
4. 永遠不用擔憂命名衝突，永遠不用擔憂樣式覆蓋，只要你寫下一個類，UI必將隨之變更；只要你們都使用tachyons，互相的工做永遠不會影響對方。
5. 寫一次就會有體會，極大提升了開發速度。

簡單的說，使用 tachyons 就比如用一種定義良好的極簡的語言來寫 inline css 的感受。

爲什麼可行

也許你想問若是 tachyons 這麼好爲啥以前從沒有出現這樣的 css 庫呢？由於這種概念和inline css同樣，只有在組件化開發浪潮中才真正變得可行。若是使用傳統開發，每一個按鈕都如此書寫想必不如使用一個btn類來的輕鬆。但在React等框架下，代碼的重用這事兒已經被組件包乾了。徹底能夠寫一個Button組件：

const Button = ({ children, color }) => (
    <a className=`f6 link dim br1 ba bw2 ph3 pv2 mb2 dib ${color}` href="#0">{children}</a>
)
複製代碼

使用以下

<Button color='hot-pink'> 註冊 </Button>
複製代碼

更多好處

1. 使用模板字符串輕鬆完成動態css
2. 樣式的重用性會極大提升

tachyons > inline css

若是你認爲 tachyons 只是 inline style 的話就錯了，使用時你會在各個細節上愛上 tachyons：

1. 優雅的媒體查詢：

<div className="mw6 mw5-m mw4-l">
// 手機上max-width: 32rem, 中屏 16rem，大屏 8rem
<div className="w3 w5-ns">
// 手機上width: 4rem， 非手機 16rem
複製代碼

使用 tachyons 開發能夠先寫手機的樣式，而後加一通 -m，-l，-ns 幾分鐘就搞定適配。

2. 自帶良好的樣式規範, 不只僅是長度寬度和顏色，項目風格統一：

/* 好比shadow */
.shadow-1 { box-shadow: 0 0 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-2 { box-shadow: 0 0 8px 2px rgba( 0, 0, 0, .2 ); }
.shadow-3 { box-shadow: 2px 2px 4px 2px rgba( 0, 0, 0, .2 ); }
.shadow-4 { box-shadow: 2px 2px 8px 0 rgba( 0, 0, 0, .2 ); }
.shadow-5 { box-shadow: 4px 4px 8px 0 rgba( 0, 0, 0, .2 ); }
複製代碼

3. debug 類。這幾乎是我對tachyons最愛的一點，甚至不使用tachyons時也會在的代碼里加入這兩個類：

.debug * { outline: 1px solid gold; }
.debug-grid { background: transparent url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAFElEQVR4AWPAC97/9x0eCsAEPgwAVLshdpENIxcAAAAASUVORK5CYII= ) repeat top left; }
複製代碼

debug-grid 會用網格描繪出現有元素盒子，debug 會給全部子元素盒子上金邊。當樣式沒有按你想象排版時，給相應元素加一個debug、debug-grid類多半能找到緣由。

4. 細節上的便利

/* 縱向 vertical */
.pv2 {
    padding-top: .5rem;
    padding-bottom: .5rem;
}
/* 橫行 horizontal */
.ph3 {
    padding-left: 1rem;
    padding-right: 1rem;
}
複製代碼

和其餘解決方法，三方庫的兼容

三方庫只要提供 className 的 props 就兼容，和其餘 css 解決天然是完美兼容，由於它就是原生態的css。 因此tachyons不能很好處理的部分只須要使用其餘解決方法或者原生css便可。值得一提的是，若是你不喜歡tachyons現有的類，本身寫個新類就行。在我看來tachyons只是提供了一種思路，徹底能夠寫一份適用大家團隊的tachyons.css。

最後

1. 先上一個 Demo 看看幾行 tachyons 能作到的適配。

2. 友情點名 tailwind.css 。它是一個受到 tachyons 啓發，試圖用 tachyons 的方式整合出一套能完成任何複雜度項目的 css 解決，比 tachyons 功能強大不少，須要必定學習。有興趣的能夠看看他們詳細的文檔。

3. 下篇 styled-jsx，會談談我的最愛的大React項目css解決。

React拾遺：從10種如今流行的 CSS 解決方案談談個人最愛 （下）