[譯] 熱愛 JavaScript，可是討厭 CSS ？

• 原文地址：Love JavaScript, but hate CSS?
• 原文做者：Dave Ceddia
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：allenlongbaobao
• 校對者：Xekin-FE、L9m

一個讀者留言說他本身寫起 JS 和 React 來以爲頗有趣，可是當要處理樣式的時候，他就很沮喪。

我熱愛 JavaScript 可是我討厭 CSS，我沒有耐心去改變這一現狀。

編程是有趣的，解決問題也是有趣的。當你經歷千辛萬苦讓你的程序正確運行的時候，這種感受，簡直難以想象。

然而，哦，糟糕，是 CSS。你的 App 運行得很好，就是樣式有點糟糕，那麼沒有人會把它當回事，由於它不像 Apple(TM) 看上去那麼高大上。

你不是一我的

首先，我要明確一個事：若是你熱愛前端中的其餘全部事，除了 CSS，那麼你並非另類。我在現實 工做 中認識一些專業級別的 UI 開發者，他們要麼在樣式處理方面很糟糕，要麼 能解決樣式問題 可是討厭這個過程而且千方百計儘快把這一環節熬過去。

幾年前我也曾經歷過這樣的困境，CSS 就像是一個有魔力的黑盒，每當我往裏面輸入一些代碼，至少三分之二的狀況下，它會輸出一些比我開始編碼前還要糟糕的東西。我經過 Google 和 StackOverflow 來解決大部分的 CSS 難題，而且發瘋似地祈禱有人遇到跟我如出一轍的難題（從某種意義上來說，他們的確有過）。

當我從那個不堪回首的陰影下走出來後，我能夠負責任地說：CSS（以及給頁面應用樣式這一過程）是一項可習得的技能。甚至 設計 也是一項可習得的技能。嚴格來說，它們是不一樣的技能。

樣式應用不等同與設計

拿到現成的視覺設計稿，而後經過寫 CSS 代碼把一大堆 div 轉化成和設計稿相匹配，這個過程就是所謂的 樣式應用（ styling ）

拿過來一塊空白畫布，在上面呈現出一個美觀的網頁，這個過程是所謂的 設計（ design ）

可能出現的狀況是：你作到了熟練掌握（甚至是精通）這兩項中的其中一項，與此同時，另外一項則是一竅不通。

做爲一個前端，你須要掌握必定的樣式應用技巧（CSS），但不必定須要掌握設計技巧

我能選擇逃避 CSS 嗎？

我也但願我能大聲地告訴你：忘掉 CSS 吧，只要 100% 專一於 JS 就能夠了。

可是真相是：我不能。只要你還想走前端這條路，就不可避免地跟 CSS 打交道，學習一些 CSS。

經驗告訴我，一旦你對 CSS 瞭解多了一點，它看上去就沒那麼難，甚至還有點有趣。當我發現我能正確地應用樣式到一個頁面，而且知道修改哪一個參數讓它達到我想要的效果，這種感受，也是很使人滿意的。

我該怎麼作？

既然不能逃避，那麼就學一些讓 CSS 不怎麼難的技巧吧。

框架

CSS 框架能讓你快速開發項目，它能很好地彌補設計技巧的不足。一般，它們均可以經過 npm/yarn 來安裝，或者經過 CDN 來部署。每種框架都有本身的特點樣式，因此你在作選擇的時候就要有所權衡。CSS 框架可以幫助你搭建一個美觀的應用，其中避免了大量樣式佈局的困擾（至少沒那麼多）。

如下就是一些流行的框架（我選了一些和 React 兼容的）：

• Bootstrap —— 很是流行（注：在 SO 上有大量的問答），並且外觀很正式。最新版本（V4）看上去更加現代化，老版本顯得有些過期了。你能夠自定義樣式，也可使用免費主題和 付費主題 來改變它的外觀。若是你正在使用 React，能夠經過 react-bootstrap 來獲取大量的預製組件好比現代化控件、彈框、表單等等。

• Semantic UI —— 另外一個兼容 React 組件的流行 CSS 框架，它的可用組件比 Bootstrap 更多，外觀上（我認爲）更加的現代化。

• Blueprint —— Blueprint 外觀上比 Bootstrap 和 Semantic UI 更棒，至少我這麼以爲。可是我本身沒有使用過它。Blueprint 脫穎而出的一點是它是用 TypeScript 寫的，並且支持 TypeScript 開發。它並不 依賴 TypeScript，可是若是你在用 TS，那麼它值得一試。

除了以上三種，還有不少好用的 CSS 框架。下面是一些 列表 ，它們都支持 React。

若是說框架是讓你少碰一些 CSS，那麼下面兩種方法就更加直接地幫助你輕鬆應對 CSS。

彈性佈局（Flexbox）

彈性佈局是一種使用 CSS 來呈現內容的現代化佈局方式。相對於以前的 float 浮動佈局（或者五分鐘前的瞎蒙亂撞），它簡單不少。它擁有 很好的瀏覽器兼容性 而且十分簡單地就能解決 CSS 的一些史詩級難題，好比 垂直居中 。

看這裏：

想象一下如何優雅地讓紅色方塊居中！只須要在外部的灰色塊中添加三行 CSS 語句就能作到：

display: flex;           /* turn flexbox on */
justify-content: center; /* center horizontally */
align-items: center;     /* center vertically */
複製代碼

若是你在瀏覽器中右擊外部灰色塊，而後查看元素，你會發現它裏面遠遠不止三行…… 可是多出來的那些並不負責居中紅方塊。增長的代碼給了它一個灰色邊框，讓它成爲一個矩形塊，在文章中水平居中 （ margin: a auto ），底部的 margin 給了下面的文字一些空間。

若是你對彈性佈局感興趣，在 CSS Tricks 有極好的 彈性佈局完整指南 ，強力推薦。彈性佈局切實幫助我更好地運用 CSS，它也是我如今正在研究解決佈局問題的工具。

CSS 網格佈局

網格佈局是一種更加現代化的佈局方式，它比彈性佈局更增強大。前者能解決二維（行和列）上的佈局，後者更擅長解決單一的行或者列上的佈局。它在瀏覽器兼容上 表現良好 。CSS Tricks 上這樣說道：

從 2017 年 3 月起，絕大多數的瀏覽器在應用網格佈局時已無需添加任何前綴，好比：Chrome （包括 Android）、Firefox、Safari（包括 iOS）以及 Opera。IE 10 和 11 也支持它，可是它基於一種過期的語法來實現的。網格佈局的時代來臨了！

在我寫這篇文章的時候，我僅僅只在排版上嘗試過網格佈局。它比彈性佈局更強大，也更復雜。我發現絕大部分狀況彈性佈局已經能很好地知足個人需求。網格佈局是我下一步要學習的目標。

有興趣瞭解更多地話，能夠閱讀 CSS Tricks 中的 網格佈局完整指南

更具操做性的方法

解決 CSS 問題有大量的有用策略。儘量避免隨機亂猜或者直接從 StackOverflow 上覆制粘貼來完成任務。

嘗試一種更加靠譜的方式吧。

• 定位元素（彈性、網格，大不了在相對定位的父元素中絕對定位子元素）
• 設置元素的 margin 和 padding 的值
• 設置邊框
• 設置一種背景顏色
• 而後 完善細節 —— 增長陰影、設置 :hover/:active/:focus 下的調整樣式等等。

總而言之，軟件工程中的經典法則好比 DRY (Don’t Repeat Yourself) 以及 Law of Demeter 均可以應用到樣式佈局中來。舉個例子，思考一下如何結合頭像佈局用戶信息：

咱們發現每一個元素都距離邊緣 20 像素，那麼一種實現方法就是兩個元素都設置 margin 值爲 20px。

可是這樣作有缺點。首先，重複問題：若是說 margin 值須要改變，那麼咱們須要在兩處修改。

其次，相對於內部元素本身決定與邊緣的距離，這難道不該該是外部盒子的職責嗎？

一個更好的解決方式是外部盒子設置其 padding 值爲 20px，這樣一來，內部元素就不用操心本身的位置了。這樣也方便添加新的元素到盒子中 —— 你不用顯式聲明每一個元素的位置

這僅僅是一個小例子，用來明確一點：思考問題加上有邏輯的方法可以讓佈局變得簡單得多。

實踐步驟

1. 找到三個佈局樣式，複製下來。這些能夠是你在使用的站點的小組件（單個推文、一個相冊卡等等），也能夠是現實內容好比信用卡、書籍封面等等。
2. 閱讀 彈性佈局完整手冊.
3. 使用彈性佈局去實現你在步驟一中挑選的佈局。

• 歡迎在推特上關注我 @dceddia

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。