CSS
bem
CSS設計
AtomicDesign

AtomicDesign+BEMを試してみた結果、疑問に思ったこと

AtomicDesign+BEMを試してみました。

前書き

試した結果、疑問に思ったことなどをまとめたものになります。
最終的に、これだという結論も出ていませんので、ご了承お願いいたします。

経緯

以前、AtomicDesignがCSS設計に適していないという記事がありました。
https://webbingstudio.com/weblog/webdesign/entry-839.html

「なるほど。そうなんだ。」と思いましたが、実際にやってみるとどうなんだろうと思い、試してみました。
やるだけ無駄なのかもしれないですが、実際に失敗して学びたいタイプです。
また、普段からBEMで書いたとき、Blockの大きさに悩むことがあるので、参考になれば…と思いましたが、結果は散々なものでした。

※AtomicDesignに関する僕の理解が浅いということも影響していると思います。
「それは違う」とか「それってこういうことだよ」のようなことがあれば、コメントなどから是非教えていただきたいと思います。よろしくお願いいたします。

とても簡単ではありますが、サンプルコードを置いて置おきます。
下記の画像の通り、本当にとても簡単なものです。

スクリーンショット 2018-01-28 5.48.32.png
https://github.com/2x2no/AtomicDesign/tree/master/sass

下記は、対応後、他にやった方いるか調べた際見つけた記事になります。
http://ceblog.mediba.jp/post/152588013417/atmic-design-meets-bem

各カテゴリのプレフィクス対応は同じ認識でしたが、確かにディレクトリは、規模の小さい順に並べたくなると思ったので、取り入れさせていただきました。
Atoms(原子)、Molecules(分子)、Organisms(有機体)、Templates(テンプレート)、Pages(ページ)というように並んでいて欲しかったので。

前書きが長くなりましたが、いろいろ疑問に感じたことがあったので、それらをあげていこうと思います。

Molecules(分子)、Organisms(有機体)、Templates(テンプレート)について

ここはほとんどレイアウト(配置)用のCSSのみしかでてこないことになるのか?
詳しくは下記で説明していきます。

「Atoms(原子)にするほどでもない」という存在はあってもいいのか

極端かもしれないが、使用されているフォントサイズ、カラー、などのスタイルは、全てAtoms(原子)に記述することができる。

そのため、これでやっていくと、Organisms(有機体)に、レイアウト以外(文字の色やサイズ指定など)の記述がなくなることになる。
とはいえ、なんでもAtoms(原子)に宣言してからというのはどうなのか?
実装を考えるととても面倒な状態だと思う。

Atoms(原子)が膨大になっていく恐れがある

上記のルールで行っていくと、Atoms(原子)が爆発的に増える心配がある。
でもそうなるということは、そのサイトに統一感がないということなのかもしれない。

HTMLの階層が深くなる

マルチクラスにしないと階層がより深くなっていきます。
でも、僕はマルチクラスは避ける方がいいという考えを持っています。
これは、意図しないCSSの上書きを避けるためです。

※ここでいうマルチクラスとはBEMでいう別のBlockが同じ要素に指定された状態のことを指します(BEMのModifierはシングルクラスという扱い)

下記のHTMLは、上記のサンプルにもあるような、よくある記事の一覧を表したものになります。
a-titleに注目してください。

マルチクラスで書いた場合

m-media__titlea-titleが同じ要素に振られています。
別に間違いでもなんでもないですが、やっぱり個人的には嫌です。

<ul class="o-mediaList">
  <li>
    <div class="m-media">
      <div class="m-media__imageBox"></div>
        <div class="m-media__textBox">
          <p class="m-media__title a-title">title</p>
          <div class="m-media__info">
            <p class="m-media__date a-date">2017-12-10</p>
            <p class="m-media__category a-category">カテゴリ</p>
          </div>
      </div>
    </div>
  </li>
</ul>

シングルクラスで書いた場合

a-titleは単独で振られています。
わかりやすいですが、HTMLの構造は1階層深くなっています。
これくらいならいいですが、今までの考えのもの実装していくと、pタグは基本的にa-付きのクラス名になっていることになります。

<ul class="o-mediaList">
  <li>
    <div class="m-media">
      <div class="m-media__imageBox"></div>
        <div class="m-media__textBox">
          <div class="m-media__title">
            <p class="a-title">title<p>
          </div>
          <div class="m-media__info">
            <div class="m-media__date a-date">
              <p class="a-date">2017-12-10<p>
            </div>
            <div class="m-media__category">
              <p class="a-category">カテゴリ</p>
            </div>
          </div>
      </div>
    </div>
  </li>
</ul>

Atoms(原子)の使用をやめた場合

m-mediaのElementにスタイルを持たせてしまう場合です。
普通です。

<ul class="o-mediaList">
  <li>
    <div class="m-media">
      <div class="m-media__imageBox"></div>
        <div class="m-media__textBox">
          <p class="m-media__title">title</p>
          <div class="m-media__info">
            <p class="m-media__date">2017-12-10</p>
            <p class="m-media__category">カテゴリ</p>
          </div>
      </div>
    </div>
  </li>
</ul>

こう比べると、Atoms(原子)の使用をやめたくなりますね。
HTMLのコードとしてはこれで、sassのmixinでa-titleのスタイルを共通化したくなります
このあたりが、AtomicDesignがCSS設計に適していない理由の1つなのかもしれません。

各組合せは1階層上を絶対経由するのか?

Atoms(原子)とMolecules(分子)の組み合わせは、Organisms(有機体)に書くべきなのか?
Templates(テンプレート)やPages(ページ)に宣言されてもいいのか?
ただ、これがOKとなると、どのディレクトリに宣言すべきかのルールが難しいですね。

余白に関して

Atoms(原子)に持たせるのは難しい。
最低でもMolecules(分子)の子要素(BEMでいうElement)が持ち始めるべき?
というより、最上位の要素(BEMでいうBlock)に余白を持たせるのは難しい。

まとめ

以上が、AtomicDesign+BEMを試して見た結果、疑問に思ったことです。
このあたりの疑問が解消できれば、そんなに悪いものではない気がしていますが、ルールが多くて大変そうです。
ただ、チームで開発する際は、ルールを決めても人によって粒度が変わってしまいそうなので、より難しいかなと思いました。