bem修饰符用什么符号
The following is an extract from our book, CSS Master, written by Tiffany Brown. Copies are sold in stores worldwide, or you can buy it in ebook form here.
以下是蒂芙尼·布朗(Tiffany Brown)所著《 CSS Master》一书的摘录。 副本在世界各地的商店中都有出售，您也可以在这里以电子书的形式购买。
BEM, or Block-Element-Modifier, is a methodology, a naming system, and a suite of related tools. Created at Yandex, BEM was designed for rapid development by sizable development teams. In this section, we’ll focus on the concept and the naming system.
BEM或“块元素修饰符”是一种方法，命名系统和一组相关工具。 BEM由Yandex创建，旨在由规模庞大的开发团队进行快速开发。 在本节中，我们将重点介绍概念和命名系统。
BEM methodology encourages designers and developers to think of a website as a collection of reusable component blocks that can be mixed and matched to create interfaces. A block is simply a section of a document, such as a header, footer, or sidebar, illustrated in Figure 2.3. Perhaps confusingly, “block” here refers to the segments of HTML that make up a page or application.
BEM方法论鼓励设计人员和开发人员将网站视为可重复使用的组件块的集合，这些组件可以混合并匹配以创建界面。 块只是文档的一部分，例如页眉，页脚或侧边栏，如图2.3所示。 可能令人困惑的是，此处的“块”是指构成页面或应用程序HTML片段。
Figure 2.3. A home page might have header, main, and footer blocks
图2.3。 主页可能具有页眉，主块和页脚块
Blocks can contain other blocks. For example, a header block might also contain logo, navigation, and search form blocks as seen in Figure 2.4. A footer block might contain a site map block.
块可以包含其他块。 例如，标题块可能还包含徽标，导航和搜索表单块，如图2.4所示。 页脚块可能包含一个站点地图块。
Figure 2.4. A header block that contains logo, navigation, and search blocks
图2.4。 包含徽标，导航和搜索块的标题块
More granular than a block is an element. As the BEM documentation explains:
比块更精细的是元素。 如BEM文档所述 ：
An element is a part of a block that performs a certain function. Elements are context-dependent: they only make sense in the context of the block they belong to.
元素是执行特定功能的块的一部分。 元素是上下文相关的：它们仅在所属块的上下文中才有意义。
A search form block, for example, contains a text input element and a submit button element, as evident in Figure 2.5. To clarify, we’re using “element” in the design element sense rather than the HTML element sense.
例如，搜索表单块包含一个文本输入元素和一个提交按钮元素，如图2.5所示。 为了澄清起见，我们在设计元素意义上而不是HTML元素意义上使用“元素”。
Figure 2.5. A search block with text input and submit button elements
图2.5。 具有文本输入和提交按钮元素的搜索块
A main content block, on the other hand, might have an article list block. This article list block might contain a series of article promo blocks. And each article promo block might contain image, excerpt, and Read More elements, as presented in Figure 2.6.
另一方面，主要内容块可能具有文章列表块。 本文列表块可能包含一系列文章促销块。 每个文章促销区可能包含image，摘录和Read More元素，如图2.6所示。
Figure 2.6. A promotional block for a website article
图2.6。 网站文章的促销区
Together, blocks and elements form the basis of the BEM naming convention. According to the rules of BEM:
块和元素一起构成BEM命名约定的基础。 根据BEM的规则：
Block names must be unique within a project. 块名称在项目中必须唯一。 Element names must be unique within a block. 元素名称在块中必须唯一。 Variations of a block―say, a search box with a dark background―should add a modifier to the class name. 块的变体(例如，具有深色背景的搜索框)应为类名添加修饰符。Block names and element names are usually separated by a double underscore (.block__element). Block and element names are typically separated from modifier names by a double hyphen (for example, .block--modifier or .block__element--modifier).
块名称和元素名称通常由双下划线(.block__element)分隔。 块和元素名称通常与修饰符名称之间用双连字符分隔(例如， .block--modifier或.block__element--modifier )。
Here’s what BEM looks like using a search form example:
这是使用搜索表单示例的BEM外观：
<form class="search"> <div class="search__wrapper"> <label for="s" class="search__label">Search for: </label> <input type="text" id="s" class="search__input"/> <button type="submit" class="search__submit">Search</button> </div> </form>A variation of this form with a dark background might use the following markup:
这种形式的深色背景变体可以使用以下标记：
<form class="search search--inverse"> <div class="search__wrapper search__wrapper--inverse"> <label for="s" class="search__label search_label--inverse"> ↵Search for: </label> <input type="text" id="s" class="search__input search__input ↵--inverse"> <button type="submit" class="search__submit search__submit- ↵inverse">Search</button> </div> </form>Our CSS might look like this:
我们CSS可能如下所示：
.search { color: #333; } .search--inverse { color: #fff; background: #333; } .search__submit { background: #333; border: 0; color: #fff; height: 2rem; display: inline-block; } .search__submit--inverse { color: #333; background: #ccc; }In both our markup and CSS, search--inverse and search__label--inverse are additional class names. They’re not replacements for search and search__label. Class names are the only type of selector used in a BEM system. Child and descendant selectors may be used, but descendants should also be class names. Element and ID selectors are verboten. This ensures that selector specificity remains low, selectors are without side effects, and CSS is independent of markup patterns. Enforcing block and element name uniqueness also prevents naming collisions, which can become a problem among teams.
在我们的标记和CSS中， search--inverse和search__label--inverse是附加的类名。 它们不能替代search和search__label 。 类名是BEM系统中使用的唯一选择器类型。 可以使用子选择器和子代选择器，但子代也应为类名。 元素和ID选择器是固定的。 这样可以确保选择器的特异性保持较低，选择器没有副作用，并且CSS与标记模式无关。 强制块和元素名称的唯一性还可以防止命名冲突，这可能会在团队之间引起问题。
There are several advantages to this approach:
这种方法有几个优点：
it’s easy for new team members to read the markup and CSS, and understand its behavior 新团队成员很容易阅读标记和CSS，并了解其行为 adding more developers increases team productivity 增加更多开发人员可提高团队生产力 consistent naming reduces the possibility of class name collisions and side effects 一致的命名减少了类名冲突和副作用的可能性 CSS is independent of markup CSS与标记无关 CSS is highly reusable CSS是高度可重用的There’s a lot more to BEM than what can comfortably fit in a section of a chapter. The BEM site describes this methodology in much greater detail, and also features tools and tutorials to get you started. To learn more about the naming convention aspect of BEM, another fantastic resource is Get BEM.
对于BEM而言，还有很多内容不适合章节的一部分。 BEM站点对这种方法进行了更为详细的描述，并提供了工具和教程来帮助您入门。 要了解有关BEM的命名约定方面的更多信息，另一个很棒的资源是Get BEM 。
翻译自: https://www.sitepoint.com/css-architecture-block-element-modifier-bem/
bem修饰符用什么符号
