どんな案件に使ったの

WorpPressのCMS案件や、コーポレートサイトの案件、店舗サイトの案件やWebアプリ案件などに使っています。
クライアントなどは出せませんが、Atomicモジュールを大量に作って納品した案件もありました。

1年間、CSS Gridと Atomicモジュールを使ってWebサイトを作ると、モジュールの問題点も出てきます。何回か記事でまとめていきたいと思います。

汎用的なものを作るために考慮したこと

複数のサイトでできるだけモジュールの再生産を行わないようにして作りました。
なぜかというと、同時進行で複数のサイトの制作が関わる時に、できるだけコードの再利用が出来るようにしたかったからです。

クラス名のルールを考える時に困ったこと

Atomicモジュールを作るときに、一番困ったのが、クラス名のルール作る時に、クラス名で使える、汎用的なクラス名のルールがないことです。
そして、レスポンシブWebデザインと絡めると、さらにクラス名の命名用の名前が足りません。

私の場合は、同じモジュールのちょっとしたバリエーション違いのクラス名の命名は、同じ意味の言葉で「英語」「ギリシャ語」を利用し、命名していました。

しかしそれでも全然足りなくなり、現在は「英語」「ギリシャ語」「イタリア語」「フランス語」「ドイツ語」「ロシア語」で、同じ意味の言葉で共通の命名規則を用意することになりました。

印刷用スタイルへの考慮

印刷用スタイルは、また別の時に書きますが、レスポンシブWebデザインの時には、印刷専用のAtomicクラスがあると、すごく楽になります。これはまた今度書きますね。

クラス名の命名は、小さい値から大きい値に

スタイルシートでAtomicクラスに指定する値は、小さい値から指定しましょう。例えば、「margin-bottom」を指定する時にも、クラス名の小さい値（「margin-bottom」の場合は0ですね）から、徐々に大きい値に（例えば、「margin-bottom」が.75rem・1.5rem・2.25rem・3remなど）向かって指定するとわかりやすくなります。

クラス名の命名は、利用頻度に応じた順番での指定はしない

クラス名の命名基準には、利用頻度に応じて命名するなどといったクラス指定はやめましょう。なぜならば、使用する人が覚えられないからです。

小さい値から大きい値に徐々にクラスを指定するようにしないと、毎回「この余白を指定するクラスは何でした？」になります。

クラス名の命名は、特定の数値に依存した命名指定はしない

特定の数値に依存したクラス指定をするのはやめましょう。よく見られるのが、「.mb10」と命名して「margin-bottom:10px」と指定する人がいますが、それはやってはいけません。「.mb10」と命名して「margin-bottom:12px」に変えてくれとクライアントに言われたらどうするのでしょうか？

言葉のパターンを決めて、条件が変わっても使い回しできることを考えましょう。

まとめ

まずは、基本概念だけで書いてみました。
次回はVertical rhythmなどと組み合わせた手法について記載します。