【譯】CSS 方法論的選擇

shery 發(fā)布于2019-08-30 13:10 / 2810人閱讀

摘要：本文轉(zhuǎn)載自眾成翻譯譯者文藺鏈接原文多年來(lái)，方法論層出不窮。不幸的是，并不存在適用所有場(chǎng)景的最佳選擇。因此，如非知己知彼，爭(zhēng)論方法論是很難得出結(jié)論的。此外，我使用這些方法論的時(shí)間并不夠長(zhǎng)，并不敢宣稱了解全部。

本文轉(zhuǎn)載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/1828
原文：http://simurai.com/blog/2016/11/27/css-methodologies

多年來(lái)，CSS 方法論層出不窮。不幸的是，并不存在適用所有場(chǎng)景的最佳選擇。本文介紹了一些適用于不同情況的 CSS 方法論。

好，跟我一起開始踩坑之旅吧。

我只需要?jiǎng)?chuàng)建一個(gè)單頁(yè)面或簡(jiǎn)單的站點(diǎn)。內(nèi)容以文本為主，可能會(huì)有一兩個(gè)表單。沒有人和我協(xié)作，就我自己（還有我家的喵）。

? 簡(jiǎn)單就好。直接給 HTML 元素添加樣式，連 class 都不需要。依賴級(jí)聯(lián)關(guān)系，利用樣式繼承。隨著站點(diǎn)增長(zhǎng)，可能需要開始看看 OOCSS，或不時(shí)使用一些工具類。

我們是一個(gè)中型團(tuán)隊(duì)。項(xiàng)目復(fù)雜度增長(zhǎng)較快，采用多人協(xié)作。

? 使用 BEM、SUIT、SMACSS、ITCSS 或 Enduring CSS 等。它們各不相同，但也有相似點(diǎn)，在某些方面亦有重疊之處。它們所使用的命名約定，能保證你們之間不會(huì)發(fā)生沖突。和團(tuán)隊(duì)一起討論下，在作出最終決定前，可能需要多進(jìn)行一些嘗試。

我們是有多個(gè)團(tuán)隊(duì)的大公司，產(chǎn)品龐大而復(fù)雜。跟蹤變化相當(dāng)困難。代碼庫(kù)不斷變化，而我們又不想顧此失彼。

? 使用 JSX、JSS，或其他類似的 CSS-in-JS 庫(kù)。將 CSS 與 HTML/JS 綁在一起，更容易修改、移動(dòng)或刪除組件，而又不影響其他部分。還可以看看 ACSS 這樣的 Atomic CSS，這是另一種解決相同問(wèn)題的思路。

以上三種情況可能最常見，但也存在更多的具體需求不盡相同的情形：

我希望從原型開始工作。

? 使用“單一用途類”，如 TACHYONS 或 BASSCSS。同時(shí)編寫 HTML 和 CSS，這項(xiàng)工作也可以很自由。不用在文件之間來(lái)回切換，不用再為如何編寫類名冥思苦想，只要根據(jù)所思所想，快速進(jìn)行構(gòu)建。

項(xiàng)目中有大量狀態(tài)、大量需要在運(yùn)行時(shí)更新的內(nèi)容。

? 使用 CSS-in-JS 庫(kù)。可以通過(guò) JS 直接更新屬性，無(wú)需查找類名或 DOM 節(jié)點(diǎn)。

我想發(fā)布一個(gè) CSS 框架（啊我也想啊）。

? 使用帶有命名空間的 BEM。如此一來(lái)，一定程度的保護(hù)作用的同時(shí)，尚能進(jìn)行定制。此外，如果能夠輕松定制主題也是極好的，比如提供一些便于修改的變量。

我想制作一個(gè)（不可定制的）第三方組件。

? 使用 CSS Modules。獨(dú)有的類名，能夠防止外部樣式污染以及內(nèi)部樣式泄漏。此外，還可以考慮 iframe 或 Web Component。

我想在 CodePen 上創(chuàng)建 Demo。

? 用點(diǎn)新東西。這種時(shí)候，正好試試那些還不太熟悉的東西。

我討厭我的同事。

? 使用鏈?zhǔn)竭x擇器，如 .header > ul.nav li .button {}。你的同事會(huì)因此苦不堪言，而你則可以在一旁暗暗幸災(zāi)樂(lè)禍。

好了。啊等等... 最后一條不算數(shù)哈。關(guān)于鏈?zhǔn)竭x擇器，我能想到的唯一使用場(chǎng)景，就是在無(wú)法訪問(wèn)元素的時(shí)候。例如，內(nèi)容由 CMS 決定，無(wú)法更改。這種時(shí)候，鏈?zhǔn)竭x擇器應(yīng)該是最（wei）佳（yi）選擇吧。

如你所見，不同使用場(chǎng)景太多太多。因此，如非知己知彼，爭(zhēng)論 CSS 方法論是很難得出結(jié)論的。

最后一點(diǎn)想法：不必抱死在一套 CSS 方法論上，還需有所借鑒，并探索出一套適合自己的方法。切換新方法是可能的，有時(shí)候則是必須的。例如一個(gè)起始于簡(jiǎn)單原型、團(tuán)隊(duì)成員與日俱增、日漸復(fù)雜的項(xiàng)目。但切換 CSS 方法論費(fèi)時(shí)費(fèi)力，容易出錯(cuò)，事先進(jìn)行一些計(jì)劃能夠減少后期的很多問(wèn)題。選擇愉快!

免責(zé)聲明：我個(gè)人也難以做到絕對(duì)中立，不偏不倚。能做到的同學(xué)請(qǐng)舉手。此外，我使用這些 CSS 方法論的時(shí)間并不夠長(zhǎng)，并不敢宣稱了解全部。但我已盡可能保持客觀中立了，如果你認(rèn)為本文錯(cuò)誤連篇，或者漏掉了重要內(nèi)容，請(qǐng)點(diǎn)擊鏈接盡情修改。

私貨時(shí)間，歡迎關(guān)注微信公眾號(hào)~