React拾遺：從10種現在流行的 CSS 解決方案談談我的最愛 （中）

FateRiddle發表於2018-07-05
ReactCSS

上篇 介紹了 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 幾分鐘就搞定適配。

  1. 自帶良好的樣式規範, 不僅僅是長度寬度和顏色，專案風格統一：
/* 比如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 ); }
複製程式碼
  1. 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類多半能找到原因。

  1. 細節上的便利
/* 縱向 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 解決方案談談我的最愛 （下）

相關文章