css类命名_标题CSS：CSS类命名的简单方法

css类命名

If you are like me then you spend way too much time coming up with the perfect class name for an element. You might Google for synonyms or imagine what this element would be if it were a real life object. You know that any semantic name will work, but somehow trying to think up the perfect name seems worth it.

如果您像我一样，那么您会花费太多时间来为一个元素提供完美的类名。 您可能会用Google搜索同义词，或者想像一下如果该元素是现实生活中的对象，它将是什么。 您知道任何语义名称都可以使用，但是以某种方式尝试考虑完美名称似乎是值得的。

To be honest, the perfect name won’t help your stylesheet all that much, but utilizing a CSS methodology could make a big difference.

老实说，完美的名字不会对您的样式表有多大帮助，但是使用CSS方法可能会带来很大的不同。

CSS方法论示例 (Examples of CSS Methodologies)

OOCSS is environmentally-friendly advice helping you write sustainable classes through recycling styles.

OOCSS是一项环保建议，可帮助您通过回收方式编写可持续的课程。

SMACSS is an all-encompassing CSS game plan that will coach you through all the proper techniques.

SMACSS是一项涵盖所有内容CSS游戏计划，将指导您掌握所有适当的技术。

Idiomatic CSS is an analytical house cleaner, organizing everything in uniform for easy recognition and peace of mind.

惯用CSS是一种分析型房屋清洁器，将所有制服统一组织起来，以便于识别和放心。

And BEM? Well, BEM is the gold standard of CSS class naming of which all CSS class naming schemes are measured against.

和BEM ？ 嗯，BEM是CSS类命名的黄金标准，所有CSS类命名方案都针对该标准进行测量。

那么，为什么还要谈论类命名呢？ (So Why Any More Talk About Class Naming?)

The BEM approach is about writing scalable CSS with an emphasis on readability and avoiding collisions. In short, BEM stands for Block__Element–Modifier. The Block is an element that encompasses a small chunk of related elements (in SMACSS it is called a module). The Element is a descendant of the block and normally wouldn’t exist without the presence of the block. The Modifier controls the state of the block.

BEM方法是关于编写可扩展CSS，并着重于可读性并避免冲突。 简而言之，BEM代表Block__Element–Modifier。 Block是一个包含一小部分相关元素的元素(在SMACSS中，它称为模块)。 元素是该块的后代，如果没有该块，通常不会存在。 修改器控制块的状态。

In BEM, you write a normal class name for the block, and for any element you copy the block name and append the element name.

在BEM中，您为块编写一个普通的类名，并为任何元素复制块名并附加元素名。

Conventional BEM looks like this:

常规的BEM看起来像这样：

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

This is good because anyone will understand that “block__element” relates to “block” and there is little chance the class “block__element” has been used anywhere else in the project.

这很好，因为任何人都会理解“ block__element”与“ block”相关，并且几乎没有机会在项目中的其他任何地方使用“ block__element”类。

But there is a problem with this approach. You write CSS all day and you do not want to write long class names that muddy up your clean markup.

但是这种方法存在问题。 您整天都在编写CSS，但是您不想编写冗长的类名，以免混淆干净的标记。

Title CSS is about giving you the benefits of BEM without adding any prefixes or special characters to your class names.

Title CSS旨在为您提供BEM的好处，而无需在类名中添加任何前缀或特殊字符。

标题CSS技巧很简单 (The Trick to Title CSS is Simple)

Using Title CSS, you’d do the following: For any global CSS class, use a capitalized name (title case). For any modifier or descendant class, use a lowercase letter for the beginning of th name.

使用Title CSS，您将执行以下操作：对于任何全局CSS类，请使用大写名称(标题大小写)。 对于任何修饰符或子类，请在名称开头使用小写字母。

This means with Title CSS you capitalize any class name that will get referenced in the stylesheet without a parent class. This means even the objects in OOCSS get capitalized. The distinction is simple; anything that is capitalized in the stylesheet must not be used again.

这意味着，使用Title CSS，您可以大写将在样式表中被引用而无需父类的任何类名。 这意味着即使OOCSS中的对象也被大写。 区别很简单。 样式表中所有大写的东西都不能再次使用。

Here is an example of how the markup would look when using Title CSS:

这是使用Title CSS时标记外观的示例：

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

And here is how the corresponding CSS would look:

以下是相应CSS的外观：

.Title {}
    .Title.isModified {}
    .Title .descendant {}

为什么标题CSS起作用 (Why Title CSS Works)

Block identifiers or “Title” classes create a scope for all the descendent classes within the block. Descendant classes can be repeated in other Title blocks without style collision.

块标识符或“标题”类为该块内的所有后代类创建范围。 后代类可以在其他Title块中重复，而不会发生样式冲突。

This is not vital for the methodology to work but since HTML class name are case-sensitive, “Title” classes are also free to be repeated as descendant classes.

这对于方法论的工作并不是至关重要的，但是由于HTML类名称区分大小写 ，因此“标题”类也可以自由地作为后代类重复。

Title CSS如何提供帮助？ (How Does Title CSS Help?)

With the Title CSS methodology, you’ll see the following benefits:

使用Title CSS方法，您将看到以下好处：

• Write CSS classes in a more natural manner.
  以更自然的方式编写CSS类。
• CSS selectors resemble the written language, like English sentences that start with an uppercase letter.
  CSS选择器类似于书面语言，例如以大写字母开头的英语句子。
• Shorter class names are faster to type and easier to scan.
  较短的类名键入速度更快，更易于扫描。
• Title case classes are easy to spot in the markup; to see what a lowercase descendant class belongs to, just traverse up the nodes for a Title class.
  标题案例类很容易在标记中发现； 要查看小写的后代类是什么，只需遍历Title类的节点即可。

陷阱和解决方法 (A Pitfall and Workaround)

Title CSS may have issues when you use a Title block to contain other blocks. If a containing Title block has the same descendant selector class as one that it envelopes than there will be a conflict, in which case you should use child combinator in Title blocks that act as containers.

当您使用标题块包含其他块时，标题CSS可能会出现问题。 如果一个包含的Title块与其封装的后代选择器类具有相同的后代选择器类，则将发生冲突，在这种情况下，应在充当容器的Title块中使用子组合器。

To demonstrate the issue, below is some sample markup with the problem present:

为了演示该问题，下面是存在该问题的一些示例标记：

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

And the accompanying CSS:

以及随附CSS：

.Container {}
    .Container .header {}
    .Container .body {}
.Title {}
    .Title .header {}
    .Title .body {}

Notice that the styles applied to the .header and .body elements inside .Container will also apply to the other .header and .body elements nested further. To avoid this, here is the solution:

请注意，应用到样式.header和.body元素中.Container也将适用于其他.header和.body进一步嵌套元素。 为避免这种情况，以下是解决方案：

.Container {}
    .Container > .header {}
    .Container > .body {}

With a selector that uses the child combinator (>), the styles will apply only to the direct children, and not to the further nested elements that have the same class names.

对于使用子组合器( > )的选择器，样式将仅应用于直接子项，而不应用于具有相同类名的其他嵌套元素。

关于萨斯的一句话 (A Word About Sass)

Pre-processors provide an excellent way to write Title CSS. The nesting ability allows you to identify Title blocks easily in the stylesheet.

预处理器提供了一种编写Title CSS的绝佳方法。 嵌套功能使您可以轻松地在样式表中识别标题块。

Here is a Title CSS example in SCSS:

这是SCSS中的Title CSS示例：

.Title {
    &.modifier {}

    .descendant {}

    > .tightlyBound {}
}

反馈？ (Feedback?)

As BEM, SMACSS, and OOCSS would suggest, it is important to keep the blocks or modules small. There are performance and maintainability benefits to include only elements that are closely related to the Title class.

正如BEM，SMACSS和OOCSS所建议的那样，保持块或模块的小巧很重要。 在性能和可维护性方面的好处是仅包含与Title类密切相关的元素。

If you have any observations or feedback on Title CSS, I’d be happy to hear them in the comments. And if you’d like to get more information or want to collaborate, be sure to check out the GitHub repo for Title CSS.

如果您对Title CSS有任何意见或反馈，我们很乐意在评论中听到它们。 而且，如果您想获取更多信息或希望进行协作，请确保查看GitHub Repo中的Title CSS 。

翻译自: https://www.sitepoint.com/title-css-simple-approach-css-class-naming/

css类命名