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.



.