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

allenWang發表於2018-03-27
JavaScriptCSS

熱愛 JS，討厭 CSS

一個讀者留言說他自己寫起 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. 使用彈性佈局去實現你在步驟一中挑選的佈局。

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

相關文章