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

前書き

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

経緯

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

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

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

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

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__titleとa-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の構造は１階層深くなっています。
これくらいならいいですが、今までの考えのもの実装していくと、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階層上を絶対経由するのか？

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

余白に関して

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

まとめ

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