/note/tech

Atomic Designの思想で、文系でもわかるCSSフレームワークを作りたい

最近のCSS設計は、OOCSS・FLOCSS・SMACSSなどがあり、高度かつ多岐に渡ります。ウェブデザイン設計についても、Material Design・Atomic Designなどがあります。

どれも素晴らしい内容なのですが、どうも私の中ではもやもやとしています。かつてと比較すると、あまりにも理系寄りで難解だと感じるのです。

確かにハードル高いよなぁ

私は、比較的小規模なCMS導入サイトの制作をしています。ビジネスパートナーのほぼすべてが制作会社やフリーランサーで、かつ、マークアップエンジニアではない制作者への完全納品が大半を占めます。つまり、私が書いたHTMLとCSSをその人たちが将来的に保守・改修していくので、難しすぎる内容にできないのです。

一口にウェブ制作者といってもデザインやマーケティングの方が得意な人、ウェブ制作者になったばかりの人、子育てをしながら少ない学習時間で仕事をしている人もいます。

美しく高度になっている一方で、ちょっとした修正でも苦戦して悩んでいる人がたくさんいるのではないかと、昨今のCMSテーマやCSSフレームワークを見るにつけ、感じてしまうのです。

これは確かに。

という発想で簡易化したのが以下ということらしい。

base -- リセットと体裁の調整

modules -- 文字色・ボタン・アイコンなどの最小単位。Atomにあたる

components -- modulesを組み合わせた使い回しが効く部品。Moleculesにあたる

parts -- componentsを組み合わせたサイト内パーツ。Organismsにあたる

layout -- 案件ごとに大きく異なる全体レイアウトのパーツ。Organismsの上位

utility -- どれにも分類されない便利クラス。最後に読み込む

良さそう。というか、フルセットを取り込むことにこだわらず、取り込み易い部分だけ使えばいいんだよな。