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

鑰匙要點

• >標題CSS是一種方法，可以通過為修飾符或後代類的全球類和小寫名稱使用大寫字母來簡化CSS類命名。這種方法提供了BEM的好處，而無需在班級名稱中添加前綴或特殊字符。
>標題CSS有助於以更自然的方式編寫CSS課程，類似於書面語言。它還允許較短的類名稱鍵入且易於掃描。大寫的類在標記中很容易發現，從而更容易理解小寫的後代屬於。
• >。 當標題塊包含具有相同後代選擇器類的其他塊時，就會出現標題CSS的潛在問題。為了避免樣式衝突，可以在用作容器的標題塊中使用子組合器（>），以確保樣式僅適用於指導兒童，而不是進一步使用相同的班級名稱的嵌套元素。
>
如果您像我一樣，那麼您花了太多時間為元素提出完美的班級名稱。您可能會使用Google使用同義詞，或者想像一下，如果它是現實生活中的對象，則該元素將是什麼。您知道任何語義名稱都會起作用，但是以某種方式試圖想出完美名稱似乎值得。 老實說，完美的名稱不會幫助您的樣式表，但是使用CSS方法可以帶來很大的不同。 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</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

>

為什麼標題CSS工作

<span><span><span><div</span> class<span>="Title isModified"</span>></span>
</span>    <span><span><span><p</span> class<span>="descendant"</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</span> class<span>="Container"</span>></span>
</span>    <span><span><span><header</span> class<span>="header"</span>></span><span><span></header</span>></span>
</span>    <span><span><span><main</span> class<span>="body"</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>        <span><span><span><section</span> class<span>="Title"</span>></span>
</span>            <span><span><span><div</span> class<span>="header"</span>></span><span><span></div</span>></span>
</span>            <span><span><span><div</span> class<span>="body"</span>></span><span><span></div</span>></span>
</span>        <span><span><span></section</span>></span>
</span>    <span><span><span></main</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</span> class<span>="block block--modifier"</span>></span>
</span>    <span><span><span><p</span> class<span>="block__element"</span>></span>
</span><span><span><span></div</span>></span></span>

>反饋？

作為BEM，SMACSS和OOCS會建議，保持塊或模塊較小很重要。只有與標題類密切相關的要素。

>如果您對標題CSS有任何觀察或反饋，我很高興在評論中聽到他們的聲音。而且，如果您想獲取更多信息或想要協作，請務必查看title CSS的GitHub存儲庫。

>關於CSS標題和類命名的常見問題（常見問題解答）

> CSS標題和類命名的意義是什麼？它有助於組織您的CSS代碼，從而更容易閱讀，理解和維護。適當的命名約定還可以提高CSS選擇器的效率，從而使您的網頁加載更快。此外，它有助於協作，因為它向其他開發人員提供了對代碼的清晰了解。

>

>如何添加CSS的標題屬性？

CSS是一種樣式語言，並且不能直接控制諸如標題屬性之類的HTML屬性。但是，您可以使用JavaScript或JQuery動態添加標題屬性到元素。另外，您可以將CSS Content屬性與attr（）函數一起顯示標題屬性值，但實際上並未將標題屬性添加到該元素中。

>

什麼是CSS屬性選擇器，它們如何使用？ >我如何使用html？ > html中的標題屬性中的標題屬性用於提供有關元素的其他信息。當用戶徘徊在元素上時，通常將其顯示為工具提示。您幾乎可以將其添加到任何HTML元素中。例如，

懸停在我身上

。

>命名CSS課程的最佳實踐是什麼？

>命名CSS課程的最佳實踐是使用有意義的描述性名稱。避免使用演示文稿或特定於位置的單詞。而是使用反映元素目的或內容的名稱。另外，使用連字符在類名稱中分開單詞並儘可能短。

>我可以在CSS類名稱中使用特殊字符嗎？ 是的，您可以在CSS類名稱中使用特殊字符，但是必須使用Backslash逃脫它們。但是，通常建議避免使用特殊字符，因為它們可以使您的代碼更難閱讀和理解。

>如何在CSS中使用特定標題屬性選擇一個元素？

>您可以使用CSS中的屬性選擇器來選擇具有特定標題屬性的元素。例如，div [title =“示例”]將選擇所有具有“示例”標題屬性值的div元素。

我可以使用CSS類名稱中的數字嗎？

是的，您可以在CSS類名稱中使用數字，但是它們不能是第一個字符。第一個字符必須是字母，連字符或下劃線。

>如何將多個類添加到HTML元素？

>您可以通過在類屬性中與空間分開將多個類添加到HTML元素。例如，

。

>我可以使用CSS更改HTML元素的標題屬性嗎？

以上是標題CSS：CSS類命名的簡單方法的詳細內容。更多資訊請關注PHP中文網其他相關文章！