CSSでのレイアウト設計について

Question

CSSでのレイアウト設計についてです。

WordPressのテンプレートで賢威を使っていたことがあります。

そのテンプレートのCSSファイルを覗くと、
共通の分部をCSSで緻密に細かくレイアウト設計していました。

といいますより、現代のサイトはCSS設計がほとんどだと思います。

例えば、各ページでサイト名のレイアウトはすべて同じという場合下記のように表現できると思います。

<h1 class="sitename">サイト名<h1>

h1.sitename{
	font-size:3em;
	text-align:center;
}

上記は簡単な例ですが、制作し始めて間もない頃は規模が小さいからいいのですが、
制作が進むにつれ、ページでのidやclassの割り振りも多くなり、CSSへの記述も多くなるので、
classやidが重複してしまいそうな気がします。

実際CSSの設計をしている方は、どんな考え方のもと設計をしているのでしょうか？

特に考えているわけではなく、とりあえず設計していき、
重複しているものがあればその都度修正したり、
同じCSSの内容があれば統合したり
そんな感じでやっているのでしょうか？

個人でやってるならそれでいいかもしれないんですが、
チームで開発している場合、そうもいかないと思うんです。

チームでの共同制作の場合

Aさん→Aファイルの制作+CSS設計もする
Bさん→Bファイルの制作+CSS設計もする
・・・
・・・
・・・
・・・

で完成させるのか

Aさん→Aファイルの制作のみ
Bさん→Bファイルの制作のみ
・・・
・・・
・・・
・・・
デザイナーさん→A～のすべてのファイルのCSS設計をするのか

チーム制作の場合、実際、どういった流れで制作しているのでしょうか？
前者の場合、idやclassが重複したり同じ内容のcssがあったりすると思うのですが、チーム制作の経験がないため分かりません。

コツというかポイントみたいなものがあればアドバイスいただきたいです。

Answer 1

個人でやってるならそれでいいかもしれないんですが、

チームで開発している場合、そうもいかないと思うんです。

おっしゃるとおり、複数人での開発ではそれぞれがそれぞれの信念・信条のもと好きにCSSを書いていくと、class名がバッティングしたり、同じ機能のclassやidが別の名前で出来上がっていったりと…。

こうした事態を防ぎ、CSSを設計する上での考え方を統一するためのSMACSS（スマックス）、BEM（ベム）などといった設計ルールがあります。

例えばSMACSSに準拠すると

• ベース（reset.cssなどの全体にデフォルトのスタイルを規定）
• レイアウト（ヘッダ、フッタ、サイドバーなどのサイズはレイアウトを規定）
• モジュール（ボタンやフォームなどのパーツなどをモジュールとして規定）
• ステート（選択済み、選択中、表示、非表示といったモジュールの状態を規定）
• テーマ（色などのテーマを規定）

といった一定のルールのもとCSSを書いていくことができます。
classの命名規則も定められていますが、もちろん単なる考え方ですので気に入らない部分は柔軟に変更したり、別のルールの考え方を混ぜて使ったりすることもあります。

こういった決まり事を規約としてあらかじめチームで決めておくことで、レイアウトを書く人、Aモジュール（＋ステート）を書く人、Bモジュールを書く人といった具合でスムーズに分業をすることができます。

それぞれの規約の詳細は下記のような記事をご参照ください。

CSSルールまとめ SMACSS. OOCSS. BEM
CSSの設計 – FLOCSSをベースにしたファイルの構成と命名規則を考える

Comments

[earnest_gay]

ありがとうございます。
参考にさせていただきます。