初めてCSS設計というものを知った

今までHTMLやCSSを書いたことはあったものの命名規則やコードを書いて行く順番などはバラバラだった。
大規模なコードに触れる機会がなかったらそれでもいいものの他の人と一緒に作業していく中で独自のやり方では賢いやり方ではない。
 
そんな中でCSS設計というものを知った。
 

CSS設計の役割

特定の決まりごとを作らずにCSSを書いていくと、そのうちコードがぐちゃぐちゃになったり必要以上に長いコードが出来上がってしまう。
それを防ぐためにクラスやIDの命名規則CSSのパーツの一つ一つをどう捉えるかということが重要となってくる。
 
これを実現するためにCSS設計があり、今回は4つのCSS設計の手法を学んだ。Atomic Design, OOCSS, SMACCS, BEMの4つ。
 
 

Atomic Design

Atomic Designとは、デザインシステムの方法論。
UIのコンポーネントを分割できない小さいものを原子(atoms)、原子の集めたものを分子(molecules)、分子の集まりを有機体(Organism)という。
有機体の集まりでテンプレート(templetes)を作り、画像や文字などを入れた状態にしたものをページ(pages)という。
 
例えで言うならガンプラを作るときと同じ。
小さい部品(atoms)を組み合わせて顔、腕など(molecules)を作っていく。
それらを組み合わせて上半身、下半身といったより大きな部品にしていく(organism)。
それらを組み合わせてガンダムが出来上がる(templetes)。
そこから塗装していき、完成(pages)。
 
 
特徴としては、
  • UIの一つ一つの要素を目で見て部品と捉え、プラモデルのように組み立てていくので再利用が可能。
  • エンジニアとデザイナーの間でコミュニケーションが取りやすい。
  • エラーはorganismに着目する。
  • 0からサイトを作っていくぶんにはいいが、既存のサイトをAtomic Designに変更していくのは大変。
 
デザインする上では全体のページを一度考えて、その上でAtomic Designを用いればエンジニア、デザイナー間の連携もはかれるし、Atomic Designの利点もうまく活用できるのではと感じた。
 

OOCSS

CSS設計の一つで、Object oriented Cascading Style Sheetsの略。
オブジェクト指向CSSを設計していこうという考え方。一つ一つのパーツをコンポーネントという。
 
アンチパターン...場所に依存した指定方法
ex) mainクラスのh2タグにはこれこれ。sidebarクラスのh2タグにはこれこれ。
 
アンチパターンをしすぎると、コピペをたくさんしなきゃならなくなってコードが長くなったり、上書きをすることで冗長になる。
詳細度を利用したスタイルの当て方をすれば複雑になるし、!importantで無理やり解決しなければならないという考えも生まれる。
 
OOCSSの考えでは一つ一つのコンポーネントをレゴのブロックのように考える。
レゴという考えが大前提。
 
注意点
  • 重複の記述を避ける。
  • 似たようなCSSのデザインが一つのページの中にあったら一つのCSSの記述でまとめる。
  • エレメントを特定することはしない。 ex) div.myClassではなく、.myClass
 
tips
  • 再利用する上でwidthやbackground-color,background-imageを変更することは便利
  • 柔軟性に富むためにグリッドの考え方を取り入れるべき
 
OOCSSの特徴
  • 一つ一つのコンポーネントをレゴのブロックのように考える。
  • コンテンツとコンテナという考え方をすることでパーツの使い回しが可能。
  • オブジェクト指向言語を知っている人ならすぐに馴染みやすいのではないかと感じた。
 
 

SMACCS

Scalable and Modular Architecture for CSSの略。スマックスって呼ぶらしい。
CSSのルールを5つのカテゴリに分ける。
 
ベース...デフォルトのスタイル
レイアウト...モジュールの配置場所
モジュール...再利用可能なパーツ
状態(ステート)...レイアウト、モジュールの状態
テーマ...レイアウト、モジュールの外観
 
ベース
  • IDやクラスは使わない。bodyやaなどのベースとなるスタイルを決める。
レイアウト
  • ページのエリア分けをする。クラスの頭に l-/ layout-をつける。ページ内の大きなブロックと捉える。
モジュール
  • レイアウト内のパーツ。module-titleなどのように頭にmodule-をつける。
ステート
  • レイアウト、モジュールの状態。is-をクラスの頭につける。
 
テーマ
  • カラーや背景色など。theme.cssで読み込ませる。
 
 
 

BEM

他のCSS設計に比べ一目でわかりやすいし、柔軟性に優れている。
Block Element Modifier によってCSS命名規則をつける。
Block...それだけで意味をなす塊 ex)input, menu, checkbox, header, container
Element… Blockの中の子要素的存在。 ex) menu item, list item, header title
Modifier… 見た目や動作を変える。 ex) disabled, highlighted, checked, size big
 
Block… クラス名のみ。ex) .block{}
Element… ブロック名+__エレメント名 ex).block__item{}
Modifier… ブロック名__エレメント名+ --modifier名 またはブロック名orエレメント名+ --modifier名
ModifierはElementかBlockが含まれている要素にしか付与できない。
 
 

まとめ

CSS設計を用いて、コードに規則性を持たせればメンテナンスしやすいし、作ったコードをパーツとして他のサイトを作る際にも応用できるとわかった。
BootstrapはOOCSSらしいし、確かに作る部品を他でも使うという前提でコードを書いていくのであれば、オブジェクトとして考えるのが一番いいのかー。
 
どれもそこまで大差がないけど、BEMが一番見てすぐにわかりやすそうだなと感じた。