有很多 CSS 方法，但我討厭它們。有些多（順風等），有些少（BEM、OOCSS 等）。但歸根結底，它們都有缺陷。

當然，人們使用這些方法有充分的理由，並且解決的許多問題我也遇到過。因此，在這篇文章中，我想寫下我自己的關於如何保持 CSS 組織的指南。

這不是任何人都可以開始使用的完整描述的 CSS 方法。也許它可以透過一些額外的工作變成一個，但這篇文章的目的只是展示我在寫 CSS 時如何做出這些決定。

內建元素

根據經驗，我嘗試盡可能使用內建元素類型，並盡可能少地使用額外的內容。

需要數千種不同類型的按鈕，這表明設計可能在更深層次上存在問題，因此，雖然在某些情況下，我覺得 CSS 是惰性的，直到使用特定於框架的類為止。 ，在大多數情況下，當按鈕只是 Click Me! 並且看起來像一個沒有任何進一步魔法的按鈕時，我認為它是理想的。

div.btton 應該變成按鈕

自訂元素

並非所有設計元素都具有語義上合適的 HTML 等效項，對於這些情況，我通常採用自訂元素。

我還沒有看到很多在沒有任何附帶javascript 的情況下使用自定義元素名稱的實例，但它已被證明是編寫清晰的HTML 的一個令人驚訝的可靠選擇，而且看起來也符合我想要的方式。

隨著時間的推移，在設計方面完全獨立的元素也更有可能開發出只能使用JavaScript 實現的需求，這為您提供了一條清晰的路徑來實現那些不需要對HTML 進行任何更改也不需要進行任何更改的需求。 CSS。

div.vsep 應該變成垂直分隔符號

課程

類別應該充當現有節點名稱的修飾符，而不是全新的元素類型，並且通常對不同的元素類型具有相似但不同的效果。

危險按鈕是按鈕。危險

屬性

修改元素的某些方法並不是類別有用的簡單開/關開關，而是更像鍵值對。

在這些情況下，具有匹配選擇器的自訂屬性幾乎每次使用它們時都被證明是最佳選擇。與帶有連字符的類別不同，它們在語法層級上顯示哪個是屬性，哪個是值，使編輯器更容易突出顯示它們，更容易人眼快速解析，並且更容易使用 JavaScript 進行互動。

對於我們這些仍然希望 attr() 函數有一天能夠進入 CSS 的人來說，這不僅僅是內容，這也是面向未來的額外一層。

ID

根據定義，ID 在文件中是唯一的。因此，任何針對特定 ID 的規則都將受到限制，如果後來發現lage 上應該存在多個這種類型的元素，則可能需要重構。

因此，應謹慎使用 ID，並且只有在一個文件中包含多個元素沒有意義時才應使用 ID。

在實用性和可讀性方面相對於類別的好處相當小，因此當無法識別元素和樣式之間明確的一對一關係時，選擇類別通常是最好的主意。

內聯CSS

任何現實世界的應用程式在某些時候都會有一些元素，只需要單獨調整，以使它們在出現的上下文中更加美觀。

在這些情況下，樣式屬性是正確的選擇。任何使用它被認為是不好的做法的原因都適用於任何類型的內聯樣式，包括實用程式類別。問題不在於屬性，而在於混合樣式和標記。

內聯樣式的樣式和類別之間的一個區別是，一個表示目的，允許使用純 CSS 並且大多是通用的，而另一個則不然。

簡單地說，width: 100px 具有普遍定義的含義，而 .width-100 可以表示任何含義。

實用程式類

在極少數情況下，特定於元素的樣式變得如此複雜，以至於顯式內聯它們會損害可讀性，甚至是不可能的（例如，如果它需要媒體查詢）。

在這些情況下，實用程式類別基本上是唯一的選擇，即使它們很醜陋。

在理想的世界中，這些可以與特定的 mixin 類別分開處理，我甚至考慮過使用前綴來更容易地區分它們，但最終沒有找到一個好的方法來使它們不難看。

我喜歡在實用程式類別前面加上 a 前綴來表示它們向元素添加某種功能，與普通類別相反，它指定元素的類型。

紅色浮動按鈕

就是這樣。當然，沒有兩個項目是相同的，有時必須稍微調整規則才能保持實用，但總的來說，這是我決定如何使螢幕上的事物看起來某種方式的框架。

你有什麼想法？你討厭它嗎？你覺得有道理嗎？在評論中讓我知道嗎？