BEM命名規約

Question

私はクラスの命名規則としてBEMを使用し始めました。そして、それを把握し始めていますが、私はもっとよく理解したいと思っています。

私は、私は十分に簡単である、H2とリンクの両方が白したいと思いますが、私はまたどこオーバーレイ外に存在するブロックの別のタイプを持って、次のブロック...

<div class="overlay"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="overlay__content overlay__content--bottom-left"> 
     <h2 class="overlay__title">About</h2> 
     <a class="overlay__link" href="#">learn more</a> 
    </div> 
</div> 

を持っています私はh2を白にしたいと思っています...これについてはどうすればいいですか？

次のように私はCSSを作成してください...

.overlay__title, 
.overlay__text{ 
    color: white; 
} 

.otherBlock__title{ 
    color: white; 
} 

それともこれを行うには良い方法はありますか？白い要素を作成するためのユーティリティクラスを作成できますか？

Answer 1

私はあなたのデザインを見たことがないので、私は言うことはできませんが、と呼ばれる1つのユニバーサルブロックを作成することです。overlay。だから、全体像は次のようになります：

<div class="article"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="article__content article__content--bottom-left"> 
     <h2 class="article__title">About</h2> 
     <a class="article__link" href="#">learn more</a> 
    </div> 
</div> 

<div class="article article--overlay"> 
    <div class="picturefill"> 
     <img class="picturefill__img" src="images/test.png" /> 
    </div> 

    <div class="article__content article__content--bottom-left"> 
     <h2 class="article__title">About</h2> 
     <a class="article__link" href="#">learn more</a> 
    </div> 
</div> 

そしてようにあなたはスタイルをこのように適用することがあります。

.article__title { 
    color: white; 
} 

.article-overlay article__title { 
    color: black; 
} 

Answer 2

まあ、BEMは単なる方法論です。あなたは好きなことをすることができます。 :)したがって、ヘッダーとリンクが常にこのコンポーネントで白い場合は、コンポーネントのCSS宣言に格納します。

.white-text { color: white; } 
.point { cursor: pointer; } 
.text-center { text-align: center; } 

これは100％OKソリューション：それはローカルの問題である場合は、あなたのようなルールを格納しますhelpers.css、のようなものを作成します。

UPDATE

はちょうど私の答えに2つのマイナスを述べました。想像できません、誰かが 方法論の答えを否定することができます。 ：D

私は著者に伝えたいと思っていたことは、よく繰り返される規則を、分離した自己説明のセレクタに格納することが本当に良い決定だということです。たとえば、それをやっているブートストラップのように。

Answer 3

私はh2とリンクを白くするのは簡単ですが、これは簡単ですが、私はh2を白にしたいオーバーレイの外に存在する別のタイプのブロックも持っています...これについて最善の方法は？あなたの特定のケースについては

が、それは次のようになり、コードを記述するための最良の方法のように聞こえる：妙に見慣れ

// in overlay.css/.less/.scss/etc... 
.overlay__title, 
.overlay__text{ 
    color: white; 
} 

// in otherBlock.css/.less/.scss/etc... 
.otherBlock__title{ 
    color: white; 
} 

を。

理由を説明するために、CSSから少し離れて、他のプログラミング言語の仕組みを見てみましょう。

---

オブジェクトがOOP言語（C＃など）であり、そのオブジェクトが本を表すと仮定したとします。ブックオブジェクトにはおそらくtitle（e.x。ヒッチハイカーの銀河ガイド）：

class Book { 
    string Title { get; set; } 
} 

ここで、人を表すオブジェクトを作成する必要があるとします。人物オブジェクトはも（e.x.博士）titleが必要になります。

class Person { 
    string Title { get; set; } 
} 

この2つのクラスの間に継承構造がありません。つまり、類似しているにも関わらず、コードが書き換えられる必要があります。バックCSSに行く

---

、これら二つのブロックは、いくつかの同様のスタイルを持っている起こる。あなたはコード再利用のために活用すべき2つの間の関係を何も記述していないので、単純にスタイルを複製してください。

あなたはプリプロセッサを使用している場合、あなたはそれはあなたが実際に記述するコードの量を減らすために、特に再利用可能なスタイル—のチャンクのために特に色—とミックスイン—のための変数—を使用すると便利だということを見つけるかもしれないが、最後CSSで適度に反復するでしょう。

これは問題ありません。あなたのCSSがgzipで配信されると、複製はかなり圧縮されます。

---

...他の場合はどうですか？

あなたは常にスタイルの特定のセット（.body__text、.content__text、.description__text）をオーバーライドしていると、それらはすべて同じ要素（例<p>）を参照していることを見つけた場合は、減らすためにその要素のためにあなたのデフォルトのスタイルの更新を検討要素をオーバーライドするために使用しているCSSの量

同じ特定の構造を常に再構築している場合は、内のブロック内に新しいブロックを作成する必要があります。たとえば：

<div class="article"> 
    <time class="timestamp"> 
    <span class="timestamp__date">...</span> 
    <span class="timestamp__time">...</span> 
    </time> 
    ... 
</div> 

と

<div class="post"> 
    <time class="timestamp"> 
    <span class="timestamp__date">...</span> 
    <span class="timestamp__time">...</span> 
    </time> 
    ... 
</div> 

：

<div class="article"> 
    <time class="article__timestamp"> 
    <span class="article__date">...</span> 
    <span class="article__time">...</span> 
    </time> 
    ... 
</div> 

と

<div class="post"> 
    <time class="post__timestamp"> 
    <span class="post__date">...</span> 
    <span class="post__time">...</span> 
    </time> 
    ... 
</div> 

がにリファクタリングされる可能性があります