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