标题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>