BEM 構文の詳細な説明

今回は BEM 構文について詳しく説明します。BEM 構文を使用する際の 注意事項 は何ですか?実際の事例を見てみましょう。

BEM は、ブロック、要素、修飾子を意味し、Yandex チームによって提案されたフロントエンドの命名方法です。この賢い命名方法により、CSS クラスがより透明になり、他の開発者にとって意味のあるものになります。 BEM の命名規則はより厳密で、より多くの情報が含まれるため、チームが大規模で時間のかかるプロジェクトを開発するために使用されます。

私が使用した BEM ベースの命名スキームは Nicolas Gallagher によって変更されたものであることに注意することが重要です。この記事で説明する命名テクニックはオリジナルの BEM ではありませんが、私が好む改良バージョンです。実際に使用される表記法に関係なく、それらはすべて同じ BEM 原則に基づいています。

命名規則のパターンは次のとおりです:

.block{}.blockelement{}.block--modifier{}

• .block は、より高いレベルの抽象化またはコンポーネントを表します。

.block 代表了更高级别的抽象或组件。

• .blockelement 代表.block的后代，用于形成一个完整的.block的整体。

• .block--modifier代表.block的不同状态或不同版本。

之所以使用两个连字符和下划线而不是一个，是为了让你自己的块可以用单个连字符来界定，如：

.site-search{} /* 块 */.site-searchfield{} /* 元素 */.site-search--full{} /* 修饰符 */

BEM的关键是光凭名字就可以告诉其他开发者某个标记是用来干什么的。通过浏览HTML代码中的class属性，你就能够明白模块之间是如何关联的：有一些仅仅是组件，有一些则是这些组件的子孙或者是元素,还有一些是组件的其他形态或者是修饰符。我们用一个类比/模型来思考一下下面的这些元素是怎么关联的：

.person{}.personhand{}.person--female{}.person--femalehand{}.personhand--left{}

顶级块是‘person’，它拥有一些元素，如‘hand’。一个人也会有其他形态，比如女性，这种形态进而也会拥有它自己的元素。下面我们把他们写成‘常规’CSS:

.person{}.hand{}.female{}.female-hand{}.left-hand{}

这些‘常规’CSS都是有意义的，但是它们之间却有些脱节。就拿.female来说，是指女性人类还是某种雌性的动物？还有.hand，是在说一只钟表的指针（译注：英文中hand有指针的意思）？还是一只正在玩纸牌的手？使用BEM我们可以获得更多的描述和更加清晰的结构，单单通过我们代码中的命名就能知道元素之间的关联。BEM真是强大。

再来看一个之前用‘常规’方式命名的.site-search的例子：

<form class="site-search  full">
  <input type="text" class="field">
  <input type="Submit" value ="Search" class="button">
</form>

这些CSS类名真是太不精确了，并不能告诉我们足够的信息。尽管我们可以用它们来完成工作，但它们确实非常含糊不清。用BEM记号法就会是下面这个样子：

<form class="site-search  site-search--full">
  <input type="text" class="site-searchfield">
  <input type="Submit" value ="Search" class="site-searchbutton">
</form>

我们能清晰地看到有个叫.site-search的块，他内部是一个叫.site-searchfield的元素。并且.site-search还有另外一种形态叫.site-search--full。

我们再来举个例子……

如果你熟悉OOCSS（面向对象CSS），那么你对media对象一定也不陌生。用BEM的方式，media对象就会是下面这个样子：

.media{}.mediaimg{}.mediaimg--rev{}.mediabody{}

从这种CSS的写法上我们就已经知道.mediaimg 和.mediabody一定是位于.media内部的，而且.mediaimg--rev是.mediaimg.blockelement は .block の子孫を表し、全体として完全な .block を形成するために使用されます。

.block--modifier は、.block の異なる状態または異なるバージョンを表します。

1 つの代わりに 2 つのハイフンとアンダースコアを使用する理由は、次のように、独自のブロックを 1 つのハイフンで区切ることができるようにするためです:

<p class="media">
  <img src="logo.png" alt="Foo Corp logo" class="img-rev">
  <p class="body">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </p>
</p>

BEM の鍵は名前です単独で、特定のタグが何に使用されているかを他の開発者に伝えることができます。 HTML コードの class 属性を参照すると、モジュールがどのように関連しているかを理解できます。一部は単なるコンポーネントであり、一部はこれらのコンポーネントの子孫または要素であり、一部はコンポーネント シンボルの他の形式または変更です。アナロジー/モデルを使用して、次の要素がどのように関連しているかを考えてみましょう: 🎜

<p class="media">
  <img src="logo.png" alt="Foo Corp logo" class="mediaimg--rev">
  <p class="mediabody">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </p>
</p>

🎜 最上位のブロックは「person」で、「hand」などの要素が含まれています。人には女性の姿など、他の姿もあり、それ自体が独自の要素を持ちます。以下では、それらを「通常の」CSS として書きます: 🎜

.caps{ text-transform:uppercase; }

🎜これらの「通常」CSS はすべて意味をなしていますが、それらの間には少し断絶があります。例として「.雌」を取り上げます。それは女性の人間を指しますか、それともある種の女性の動物を指しますか?そして、.hand は時計の針のことを言っているのでしょうか（注釈：hand は英語で手のことです）。それともトランプの手でしょうか？ BEM を使用すると、より多くの説明とより明確な構造を取得でき、コード内の名前だけで要素間の関係を知ることができます。 BEMは本当に強力です。 🎜🎜「従来の」方法で名前が付けられた .site-search の別の例を見てみましょう: 🎜

.site-logo{}

🎜これらの CSS クラス名は非常に不正確で、十分な情報を伝えていません。彼らと一緒に仕事を進めることはできますが、彼らは本当に漠然としています。 BEM 表記を使用すると、次のようになります: 🎜

.header{}.headerlogo{}

🎜 .site-search というブロックがあり、その中に .site-searchfield 要素。 <code>.site-search には、.site-search--full という別の形式があります。 🎜🎜別の例を見てみましょう... 🎜🎜 OOCSS (オブジェクト指向 🎜CSS) に精通している場合)、メディア オブジェクトについてよく知っている必要があります。 BEM を使用すると、メディア オブジェクトは次のようになります: 🎜

<p class="content">
  <h1 class="contentheadline">Lorem ipsum dolor...</h1>
</p>

🎜 この CSS 記述方法から、.mediaimg と .mediabody は に配置する必要があることがすでにわかります。 media は内部的なもので、.mediaimg--rev は .mediaimg の別の形式です。上記の情報はすべて、🎜CSS セレクター🎜 の名前を介して取得できます。 🎜🎜BEM のもう 1 つの利点は、次の状況にあります: 🎜

.site-logo{}.site-logo--xmas{}

🎜上記のコードだけでは、2 つのクラス .media と .alpha が互いにどのように関連しているのかわかりません。同様に、.body と .lede の間、または .img-rev🎜 と .media? の間の関係を知る方法はありません。この HTML からは (メディア オブジェクトをよく知らない限り)、このコンポーネントが何で構成されているのか、またその他にどのような形式があるのか​​が分かりません。このコードを BEM 方法で書き直すと: 🎜

<p class="media">
  <img src="logo.png" alt="Foo Corp logo" class="mediaimg--rev">
  <p class="mediabody">
    <h3 class="alpha">Welcome to Foo Corp</h3>
    <p class="lede">Foo Corp is the best, seriously!</p>
  </p>
</p>

我们立马就能明白.media是一个块，.mediaimg--rev是一个加了修饰符的.mediaimg的变体，它是属于.media的元素。而.mediabody是一个尚未被改变过的也是属于.media的元素。所有以上这些信息都通过它们的class名称就能明白，由此看来BEM确实非常实用。

丑极了！

通常人们会认为BEM这种写法难看。我敢说，如果你仅仅是因为这种代码看上去不怎么好看而羞于使用它，那么你将错失最重要的东西。除非使用BEM让代码增加了不必要的维护困难，或者这么做确实让代码更难读了，那么你在使用它之前就要三思而行了。但是，如果只是“看起来有点怪”而事实上是一种有效的手段，那么我们在开发之前当然应该充分考虑它。

是，BEM看上去确实怪怪的，但是它的好处远远超过它外观上的那点瑕疵。

BEM可能看上去有点滑稽，而且有可能导致我们输入更长的文本（大部分编辑器都有自动补全功能，而且gzip压缩将会让我们消除对文件体积的担忧），但是它依旧强大。

用还是不用BEM?

我在我的所有项目中都使用了BEM记号法，因为它的有效性已经被它自己一次又一次地证明。我也极力地建议别人使用BEM，因为它让所有东西之间的联系变得更加紧密，让团队甚至是你个人都能够更加容易地维护代码。

然而，当你真正使用BEM的时候，重要的是，请记住你没必要真的在每个地方都用上它。比如：

.caps{ text-transform:uppercase; }

这条CSS不属于任何一个BEM范畴，它仅仅只是一条单独的样式。

另一个没有使用BEM的例子是：

.site-logo{}

这是一个logo，我们可以把它写成BEM格式，像下面这样：

.header{}.headerlogo{}

但我们没必要这么做。使用BEM的诀窍是，你要知道什么时候哪些东西是应该写成BEM格式的。因为某些东西确实是位于一个块的内部，但这并不意味它就是BEM中所说的元素。这个例子中，网站logo完全是恰巧在.header的内部，它也有可能在侧边栏或是页脚里面。一个元素的范围可能开始于任何上下文，因此你要确定只在你需要用到BEM的地方你才使用它。再看一个例子：

<p class="content">
  <h1 class="contentheadline">Lorem ipsum dolor...</h1>
</p>

在这个例子里，我们也许仅仅只需要另一个class，可以叫它.headline；它的样式取决于它是如何被层叠的，因为它在.content的内部；或者它只是恰巧在.content的内部。如果它是后者（即恰巧在.content的内部，而不总是在）我们就不需要使用BEM。

然而，一切都有可能潜在地用到BEM。我们再来看一下.site-logo的例子，想象一下我们想要给网站增加一点圣诞节的气氛，所以我们想有一个圣诞版的logo。于是我们有了下面的代码：

.site-logo{}.site-logo--xmas{}

我们可以通过使用--修饰符来快速地为我们的代码构建另一个版本。

BEM最难的部分之一是明确作用域是从哪开始和到哪结束的，以及什么时候使用（不使用）它。随着接触的多了，有了经验积累，你慢慢就会知道怎么用，这些问题也不再是问题。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

在表单中button与input的区别

详谈css样式初始化 

js的自定义trim函数使用方法

以上がBEM 構文の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。