标题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中文网其他相关文章！