0

私は CSS を整理するための CSS 方法論として BEM を使用し始めており、プロジェクトの過程で、ほとんどすべてがモジュールに変わりました。

モジュールのレイアウト スタイルを親モジュールに配置しました。それはうまく機能しています。

私を混乱させていて、把握できないのは次のようなものです:私が次のものを持っているとしましょう:

<div class="picture-holder">
  <div class="picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
  <div class="picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
</div>

したがって、この段階では、BEM の規則に従って、モジュールの親クラス名を独自のモジュール名に追加します。

<div class="picture-holder">
  <div class="picture-holder__picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
  <div class="picture-holder__picture-box">
    <img class="picture-box__image" />
    <span class="picture-box__caption">text</span>
  </div>
</div>

次に、それぞれに唯一のモジュール名を追加します。

<div class="picture-holder">
  <div class="picture-holder__picture-box picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
  <div class="picture-holder__picture-box picture-box">
    <img class="picture-box__image image" />
    <span class="picture-box__caption caption">text</span>
  </div>
</div>

これは正しく見えますか？

各モジュール スタイルを保持する個々のファイルを何と呼びますか?: - picture-box.sass - picture-holder.sass - picture.sass - caption.sass

このように入れ子になるたびに、ほとんど意味のないモジュール、または「画像」、「画像」、「ボックス」、「キャプション」などの一般的すぎるモジュールになってしまうようです

階層の上位で同じ問題が発生します。したがってdiv、サイトの周りにラップがある場所、たとえば: .container、今は.container-header、.container-mainおよびがあり.container-footerます。

私は BEM の背後にある主な概念とモジュール内のすべてが好きですが、それは私が混乱するモジュール内のモジュールです。

BEM を説明しているすべての記事は、これについては決して話さず、この問題に当たらない非常に単純な例を示しています。

私はそれを間違っていますか？

私は基本的に、このテーマに関する人々のアイデアと、どのように改善できるかを知りたいのですか?

4

1 に答える 1

2

あなたは正しい軌道に乗っていますが、モジュール接頭辞なしで「ベース」クラスを追加する必要はありません。

これがあなたのバージョンです：

<div class="picture-holder">
  <div class="picture-holder__picture-box picture-box">
    <img class="image" />
    <span class="caption">text</span>
  </div>
  <div class="picture-holder__picture-box picture-box">
    <img class="picture-box__image image" />
    <span class="picture-box__caption caption">text</span>
  </div>
</div>

おそらく必要なものは次のとおりです。

<div class="picture-holder">
  <div class="picture-box">
    <img class="picture-box__image" />
    <span class="picture-box__caption">text</span>
  </div> 
  <div class="picture-box">
    <img class="picture-box__image" />
    <span class="picture-box__caption">text</span>
  </div>
</div>

「picture-box」の使用方法に応じて、さらに単純化できます。

<div class="picture-holder">
  <div class="picture-holder__box">
    <img class="picture-holder__image" />
    <span class="picture-holder__caption">text</span>
  </div> 
  <div class="picture-holder__box">
    <img class="picture-holder__image" />
    <span class="picture-holder__caption">text</span>
  </div>
</div>
于 2013-11-27T14:02:28.030 に答える