資訊專欄INFORMATION COLUMN
摘要：本文轉載自眾成翻譯譯者文藺鏈接原文多年來，方法論層出不窮。不幸的是，并不存在適用所有場景的最佳選擇。因此，如非知己知彼，爭論方法論是很難得出結論的。此外，我使用這些方法論的時間并不夠長，并不敢宣稱了解全部。
本文轉載自：眾成翻譯
譯者：文藺
鏈接：http://www.zcfy.cc/article/1828
原文：http://simurai.com/blog/2016/11/27/css-methodologies
多年來，CSS 方法論層出不窮。不幸的是，并不存在適用所有場景的最佳選擇。本文介紹了一些適用于不同情況的 CSS 方法論。
好，跟我一起開始踩坑之旅吧。
我只需要創建一個單頁面或簡單的站點。內容以文本為主，可能會有一兩個表單。沒有人和我協作，就我自己（還有我家的喵）。
? 簡單就好。直接給 HTML 元素添加樣式，連 class 都不需要。依賴級聯關系，利用樣式繼承。隨著站點增長，可能需要開始看看 OOCSS，或不時使用一些工具類。
我們是一個中型團隊。項目復雜度增長較快，采用多人協作。
? 使用 BEM、SUIT、SMACSS、ITCSS 或 Enduring CSS 等。它們各不相同，但也有相似點，在某些方面亦有重疊之處。它們所使用的命名約定，能保證你們之間不會發生沖突。和團隊一起討論下，在作出最終決定前，可能需要多進行一些嘗試。
我們是有多個團隊的大公司，產品龐大而復雜。跟蹤變化相當困難。代碼庫不斷變化，而我們又不想顧此失彼。
? 使用 JSX、JSS，或其他類似的 CSS-in-JS 庫。將 CSS 與 HTML/JS 綁在一起，更容易修改、移動或刪除組件，而又不影響其他部分。還可以看看 ACSS 這樣的 Atomic CSS，這是另一種解決相同問題的思路。
以上三種情況可能最常見，但也存在更多的具體需求不盡相同的情形：
我希望從原型開始工作。
? 使用“單一用途類”，如 TACHYONS 或 BASSCSS。同時編寫 HTML 和 CSS，這項工作也可以很自由。不用在文件之間來回切換，不用再為如何編寫類名冥思苦想，只要根據所思所想，快速進行構建。
項目中有大量狀態、大量需要在運行時更新的內容。
? 使用 CSS-in-JS 庫。可以通過 JS 直接更新屬性，無需查找類名或 DOM 節點。
我想發布一個 CSS 框架（啊我也想啊）。
? 使用帶有命名空間的 BEM。如此一來，一定程度的保護作用的同時，尚能進行定制。此外，如果能夠輕松定制主題也是極好的，比如提供一些便于修改的變量。
我想制作一個（不可定制的）第三方組件。
? 使用 CSS Modules。獨有的類名，能夠防止外部樣式污染以及內部樣式泄漏。此外，還可以考慮 iframe 或 Web Component。
我想在 CodePen 上創建 Demo。
? 用點新東西。這種時候，正好試試那些還不太熟悉的東西。
我討厭我的同事。
? 使用鏈式選擇器，如 .header > ul.nav li .button {}。你的同事會因此苦不堪言，而你則可以在一旁暗暗幸災樂禍。
好了。啊等等... 最后一條不算數哈。關于鏈式選擇器，我能想到的唯一使用場景，就是在無法訪問元素的時候。例如，內容由 CMS 決定，無法更改。這種時候，鏈式選擇器應該是最（wei）佳（yi）選擇吧。
如你所見，不同使用場景太多太多。因此，如非知己知彼，爭論 CSS 方法論是很難得出結論的。
最后一點想法：不必抱死在一套 CSS 方法論上，還需有所借鑒，并探索出一套適合自己的方法。切換新方法是可能的，有時候則是必須的。例如一個起始于簡單原型、團隊成員與日俱增、日漸復雜的項目。但切換 CSS 方法論費時費力，容易出錯，事先進行一些計劃能夠減少后期的很多問題。選擇愉快!
免責聲明：我個人也難以做到絕對中立，不偏不倚。能做到的同學請舉手。此外，我使用這些 CSS 方法論的時間并不夠長，并不敢宣稱了解全部。但我已盡可能保持客觀中立了，如果你認為本文錯誤連篇，或者漏掉了重要內容，請點擊鏈接盡情修改。
私貨時間，歡迎關注微信公眾號~
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115349.html
摘要：它們都錯誤地使用了波浪選擇器，并造成了很多地方的代碼臃腫。大家可能以前也都遇到或者使用過波浪選擇器，畢竟它作為選擇器已經很長時間了，甚至都支持。我的經驗里，使用波浪選擇器一般都是通過而不是來選擇兄弟元素的。 原文：The tilde CSS selector, use carefully! 最近我的一些項目都遇到了一些類似的樣式問題。它們都錯誤地使用了波浪選擇器，并造成了很多地方的CS...
摘要：這個方法論在內容和容器之間有著明顯的區分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。 原文鏈接：A Look at Some CSS methodologies CSS在大型，復雜，快速迭代的系統中難以管理的程度是出了名的。 其中一個原因是CSS缺少內置的作用域管理機制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...
摘要：這個方法論在內容和容器之間有著明顯的區分。這是通過把命名為表示其角色的類名。通過使用這種扁平的命名方式避免了多后代的選擇器。 原文鏈接：A Look at Some CSS methodologies CSS在大型，復雜，快速迭代的系統中難以管理的程度是出了名的。 其中一個原因是CSS缺少內置的作用域管理機制。在CSS中，所有的一切都是全局的，這意味著任何你所做的改變都有可能層疊或者改...
摘要：全文為這些年，我曾閱讀深入理解過或正在閱讀學習即將閱讀的一些優秀經典前端后端書籍。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。 全文為這些年，我曾閱讀、深入理解過（或正在閱讀學習、即將閱讀）的一些優秀經典前端/Java后端書籍。全文為純原創，且將持續更新，未經許可，不得進行轉載。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。 基礎 基礎書籍 進階 進階階段，深入學習的書...
摘要：全文為這些年，我曾閱讀深入理解過或正在閱讀學習即將閱讀的一些優秀經典前端后端書籍。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。 全文為這些年，我曾閱讀、深入理解過（或正在閱讀學習、即將閱讀）的一些優秀經典前端/Java后端書籍。全文為純原創，且將持續更新，未經許可，不得進行轉載。當然，如果您喜歡這篇文章，可以動手點點贊或者收藏。 基礎 基礎書籍 進階 進階階段，深入學習的書...
閱讀 2671·2023-04-25 18:10
閱讀 1606·2019-08-30 15:53
閱讀 2788·2019-08-30 13:10
閱讀 3216·2019-08-29 18:40
閱讀 1128·2019-08-23 18:31
閱讀 1201·2019-08-23 16:49
閱讀 3400·2019-08-23 16:07
閱讀 877·2019-08-23 15:27
