8

BEM の方法論では、次のような 2 つのクラスがあるとします。

.staff__teacher

と.staff__teacher--professor

教授のマークアップでは、両方のクラスを持つという考えですか、それとも変更されたクラスだけを持つという考えですか?

<div class='staff__teacher staff__teacher--professor'></div>

また

<div class='staff__teacher--professor'></div>

私の観点からは、後者の方が合理的で読みやすいため、後者を選択する方がはるかに理にかなっているように思えます。

Sass では、クラスを拡張するだけでクラスが作成されます.staff__teacher。

.staff__teacher--professor{
    @extends .staff__teacher;
    //...extra professor styles here..
}

ただし、BEM で見たチュートリアルの大部分では、両方のクラスがマークアップに追加されています。ある方法が他の方法よりも好ましいかどうかを誰かが理解するのを手伝ってくれますか? 私の方法を使用すると問題が発生する可能性はありますか?

4

3 に答える 3

9

まず、これはかなり意見に基づく回答です。@extends基本クラスの代わりに使用することを妨げるものは何もありません。2 つのクラスが使用される理由を次に示します。

1. SASSだけではない

まず、誰もが を使用しているわけではありませんSASS。かなり最近まで持ってLESSいませんでした。extend方法論は、特定のプリプロセッサに限定したり、まったく限定したりすべきではありません。ここで見ているのは、プレーンな古い CSS です。ただし、次のようなことができます：

CSS

.button,
.button--red,
.button--green {
    // base styles
}

個人的には、基本スタイルを書いたらそのままにしておきたいと思います。ボタンの場合は、かなり多くの修飾子がある可能性があります。私にとっては、要素に 2 つのクラスを配置することで、CSS をよりクリーンで簡潔に保つことができるため、これは少し面倒です。

2.説明的

BEM の一部は、クラスがより記述的になり、スタイルシートを見て、モジュール/コンポーネントとその中に何が含まれているかをよりよく理解できるようになったことです。私にとって、基本クラスは同じことをします。マークアップを見ているときに、より多くの情報を得ることができます。

<input type="submit class="button button--green"/>

緑のボタンで、ボタンから派生していることがわかります。これは簡単に変更でき、おそらく他のオプションも利用できることがわかっています。スタイルシートを見ずにすべて。

3. 柔軟性と一貫性

基本クラスと修飾子が 1 つしかないとは思わないでください。あなたは非常に簡単にたくさん持つことができます。たとえば、button、button--largeおよびを使用できますbutton--green。

<input type="submit class="button button--large button--green"/>

では、どの修飾子が拡張するのでしょうbuttonか? 両方が適用された場合、同じスタイルが 2 回適用されます。別の開発者はどのように知っていますか? シンプルで一貫したアプローチを維持することで、コンポーネントは読みやすく、理解しやすく、正しく使用できるようになります。

概要

これらは、例で extends が頻繁に使用されないいくつかの理由です。最も重要な点は、何をするにしても一貫したアプローチであり、すべての開発者がこれを認識していることです。

于 2014-05-19T17:35:17.203 に答える
1 
  use code this sample 
  //css 

   <style>
   .firstClass{
      color:red;
      font-size:20px;
    }
    .secondClass{
        border:1px solid red;
        font-size:30px;
        display:inline-block;
    }
    .thirdclass{
       font-size:40px;
    }
    .fourthclass{
       padding:50px;
    }

   </style>

     //use code html

    <div class="firstClass secondClass thirdclass fourthclass">khitsapanadilove@gmail.com</div>
    <div class="secondClass thirdclass"> khitsapanadilove@gmail.com </div>
    <div class="thirdclass firstClass"> khitsapanadilove@gmail.com </div>
    <div class="secondClass fourthclass"> khitsapanadilove@gmail.com </div>
于 2014-05-22T08:26:39.963 に答える