BEMに従って植字する方が良い理由-実用的な例

BEMについて（ Yandex CSSライティング方法論-Block__Element_Modifier ←最も正確な復号化レコード）今、あなたはすべてのステップで聞くことができます。 ケースは良好であることが判明し、世界中に広まりました。 YandexはW3Cに参加しました （接続されているかどうか-私は知りませんが、そうすることを望みます- [ 実際にはありません ] ）。

まだ試していないが、 BEMの説明を読んだ人の多くは、「このすべてのアクションの実際の使用とは何ですか？」という公正な質問をしていると思います。 もちろん、多くの利点が説明されており、方法論の一般的な感情は肯定的であり、試してみるのは良いように思えますが、具体的なものはありません。 右ここは、生き物などの例です。 ここに私はウェブサイトを持っています、ここはBEMではないレイアウトです、なぜすべてを変更する必要がありますか？ 特に、BEMがクラスを除くすべてのセレクターを基本的に削除するという事実を考慮すると、W3Cの賢い夫は、すべてが非常に間違っていることに気付いていませんか？

このために、私はあなたといくつかの例を引用する自由を取ります（もちろん、あなたが何らかの形でレイアウトに接続している場合）、私は毎日この言葉を恐れていません。 そして、レイアウトが元々BEMで行われた場合、そのような状況で何が変わるでしょう。

BEMについて少し

簡単に言うと、BEMシステム全体が2つの論文（原則/規則）に適合します。

1. クラス以外のセレクタはありません-つまり タグ、ID、その他にスタイルをかけることはなく、クラスだけです。
2. — .. .class1 .class2{ display: none; }, 1 () (/ /). [ ]

. — .

— ( , ) .

( )

- . . .

1

. , . :

.content a{
  color: green;
}

, — AJAX . ajax-link — CSS . 2 , . a.ajax-link, css .

, content ID — .

#content a{
  color: green;
}

«» id — #content .ajax-link, .. id , , .

1pro

.. :

#buy-form fieldset .buttons input.submit{
  color: green;
}

, , — - , #buy-form.

2

:

.content h1{
  font-size: 18px;
}
.content h1 a{
  color: green;
}
.content h1 a span{
  text-decoration: none;
}

, h1 h3 div, ( — , — ). .. 1 HTML 3 .

( ) CSS / .

-, , .. .
-, .

, .

1 1pro

( 1) id ( 1pro) :

.content__link{
  color: green;
}

: content link [ _].

. .. . .content__link CSS , :

.content__link{
  color: green;
}
.content__link_type_ajax{
  color: red;
  text-decoration: none;
}

: .

.. :

<a class="conten__link content__link_type_ajax" href="#"> </a>

1pro - :

.buy-form__submit{
  color: green;
}

. , , ( ), . , HTML , . , , -. CSS ( ). , .

2

, — :

.content-header{
  font-size: 18px;
}
.content-header__link{
  color: green;
}
.content-header__link-text{
  text-decoration: none;
}

, — 1 HTML . …

. … . , + Twitter Bootstrap . , . . . — . ( , ..) — ( ) , .

, .

• - — — - . , .
• ( ). ( ), .

PS: vithar.

.