標題CSS：CSS類命名的簡單方法-css教學-PHP中文網

首頁

web前端

css教學

標題CSS：CSS類命名的簡單方法

Joseph Gordon-Levitt

Feb 28, 2025 am 08:49 AM

Title CSS: A Simple Approach to CSS Class Naming

標題CSS：CSS類命名的簡單方法

鑰匙要點

>標題CSS是一種方法，可以通過為修飾符或後代類的全球類和小寫名稱使用大寫字母來簡化CSS類命名。這種方法提供了BEM的好處，而無需在班級名稱中添加前綴或特殊字符。
>。當標題塊包含具有相同後代選擇器類的其他塊時，就會出現標題CSS的潛在問題。為了避免樣式衝突，可以在用作容器的標題塊中使用子組合器（>），以確保樣式僅適用於指導兒童，而不是進一步使用相同的班級名稱的嵌套元素。

的示例

> oocss是環保的建議，可以通過回收風格來幫助您編寫可持續的課程。

SMACSS是一個無所不包的CSS遊戲計劃，它將指導您完成所有適當的技術。

慣用的CSS是一個分析性的房屋清潔劑，整理一切，以便於易於識別和安心。

和bem？好吧，BEM是CSS類命名的黃金標準，其中所有CSS類命名方案均可根據。

那麼，為什麼還要再談論班級命名？ BEM方法是關於編寫可伸縮的CSS，重點是可讀性和避免碰撞。簡而言之，BEM代表Block__Element -Modifier。該塊是包含一小部分相關元素的元素（在SMACSS中，稱為模塊）。該元素是塊的後代，如果沒有塊的存在，通常就不會存在。修飾符控制塊的狀態。

在BEM中，您為塊編寫一個普通類名稱，並且對於任何元素，您都會復制塊名並附加元素名稱。

傳統的bem看起來像這樣：

這是很好的，因為任何人都會理解“ block__Element”與“塊”有關，而且項目中其他任何地方都使用了類“ block__Element”。

，但是這種方法存在問題。您整天都寫CSS，您不想編寫泥濘的級別名稱。

>標題CSS是為了給您BEM的好處，而無需在您的班級名稱中添加任何前綴或特殊字符。

標題CSS的技巧很簡單

>使用標題CSS，您將執行以下操作：對於任何全局CSS類，使用大寫的名稱（標題案例）。對於任何修改器或後代類，請在名稱的開始中使用小寫字母。

>這意味著使用標題CSS，您將不帶父類別的樣式表中引用的任何類名稱。這意味著即使OOCS中的對像也會大寫。區別很簡單；在樣式表中大寫的任何內容都不得再次使用。

這是使用標題CSS時標記的外觀的一個示例

>這是相應的CSS的外觀：

<span><span><span><div> class<span>="block block--modifier"</span>>
    <span><span><span><p> class<span>="block__element"</span>></p></span>
</span><span><span><span></span></span></span></span>
</div></span>></span></span>

為什麼標題CSS工作

<span><span><span><div> class<span>="Title isModified"</span>>
    <span><span><span><p> class<span>="descendant"</span>></p></span>
</span><span><span><span></span></span></span></span>
</div></span>></span></span>

塊標識符或“標題”類為塊中的所有後裔類創建一個範圍。後代類可以在其他標題塊中重複出現，而不會出現樣式的碰撞。

這對方法的工作並不重要，但是由於HTML類名稱對案例敏感，因此“標題”類也可以自由地重複為後代類。

標題CSS如何幫助？

>標題CSS方法論，您會看到以下好處：>

>以更自然的方式寫CSS課程。

> CSS選擇器類似於書面語言，例如以大寫字母開頭的英語句子。

較短的類名稱更快，更易於掃描。
>標題案例類在標記中很容易發現；要查看小寫的後代類屬於什麼，只需穿越標題類別的節點。
當您使用標題塊包含其他塊時，標題CSS可能會出現問題。如果包含的標題塊具有相同的後代選擇器類別，那麼它的包裹比將發生衝突，在這種情況下，您應該在用作容器的標題塊中使用兒童組合者。

和隨附的CSS：

請注意，應用於.header和.body元素的樣式也將適用於其他.header和.body元素進一步嵌套。為了避免這種情況，這是解決方案：

<span><span>.Title</span> {}
</span>    <span><span>.Title.isModified</span> {}
</span>    <span><span>.Title .descendant</span> {}</span>

>使用兒童組合器（>）的選擇器，樣式僅適用於直接的孩子，而不適用於具有相同類名稱的進一步的嵌套元素。

關於sass

<span><span><span><div> class<span>="Container"</span>>
    <span><span><span><header> class<span>="header"</span>></header></span><span><span></span>></span>
</span>    <span><span><span><main> class<span>="body"</span>></main></span>
</span>        <span><span><span><section> class<span>="Title"</span>></section></span>
</span>            <span><span><span><div> class<span>="header"</span>><span><span></span></span>
</div></span>></span>
</span>            <span><span><span><div> class<span>="body"</span>><span><span></span></span>
</div></span>></span>
</span>        <span><span><span></span>></span>
</span>        <span><span><span><section> class<span>="Title"</span>></section></span>
</span>            <span><span><span><div> class<span>="header"</span>><span><span></span></span>
</div></span>></span>
</span>            <span><span><span><div> class<span>="body"</span>><span><span></span></span>
</div></span>></span>
</span>        <span><span><span></span>></span>
</span>    <span><span><span></span>></span>
</span><span><span><span></span></span></span></span></span></span></span>
</div></span>></span></span>

的單詞

>預處理提供了撰寫標題CSS的絕佳方法。嵌套功能使您可以輕鬆地在樣式表中識別標題塊。

<span><span>.Container</span> {}
</span>    <span><span>.Container .header</span> {}
</span>    <span><span>.Container .body</span> {}
</span><span><span>.Title</span> {}
</span>    <span><span>.Title .header</span> {}
</span>    <span><span>.Title .body</span> {}</span>

這是SCSS中的標題CSS示例：

<span><span><span><div> class<span>="block block--modifier"</span>>
    <span><span><span><p> class<span>="block__element"</span>></p></span>
</span><span><span><span></span></span></span></span>
</div></span>></span></span>