COLUMN コラム

コーディングの効率を上げる方法はいろいろあります。

例えば、SCSSやPugといった簡略記法だったり、プラグインが豊富なエディタ（Visual Studio Code等）を使用するなどです。

しかし、これらの技術やツールを活用しても「CSS設計」が自己流のままでは十分ではありません。CSS設計がきちんとできていないと、クラス名を何度も修正する手戻りが発生したり、追加依頼に既存のクラスを流用できず、似たようなスタイルを一からコーディングする羽目になったりします。

今回はコーディングの効率化をする上で、もっとも重要な「CSS設計」について紹介いたします。

1. CSS設計とは

「CSS設計」とは、CSSを管理しやすく保つための手法のことです。

CSSでWebサイトを作ること自体は、自己流の書き方でも十分可能です。LPや小規模のサイトなら、まだ全体像を把握することができます。しかし、ページ数が増えてくるとCSSはどんどん複雑になり、全体を管理することは難しくなってきます。

きちんと管理されずに書かれたCSSは、サイト公開後の運用において「ページを追加したけどスタイルがきちんと当たらない」「見出しのデザインを修正したらレイアウトが崩れた」など、さまざまな問題を引き起こします。

こうした問題を回避するために考えられたのが「CSS設計」です。GoogleのエンジニアであるPhilip Waltson氏は「よいCSS設計」を以下のように提唱しています。

1. 予測できる
2. 再利用できる
3. 保守できる
4. 拡張できる

有名な手法としてはOOCSSやBEM、SMACSS、FLOCSSといったものがあります。ここからは私自身が使用して、実際に恩恵を受けているBEMとFLOCSSについて紹介します。

2. BEMについて

BEMとは「Block」「Element」「Modifier」の略で、要素を3つに分解して命名する手法です。BEMはクラスセレクターの使用が基本となっており、要素型セレクター（h1, p..）やIDセレクター（#header, #nav..）は推奨されていません。

Block
– どこでも使い回すことができる、大きなパーツ。
Element
– Blockを構成する要素で、Blockの外では独立して使用できない。
Modifier
– BlockやElementの状態や特徴を表す。必ずBlockやElementと一緒に使う。

2-1. BEMの記述法

「Block__Element—Modifier」のように記述します。
・ 「Block」と「Element」はアンダースコア2つ（ __ ）で区切ります。
・ 「Element」と「Modifier」はハイフン2つ（ — ）で区切ります。

記述サンプル例：

2-2. BEMのメリット

・ Block名から、どのパーツのクラスなのか判断できる。
（例：header / header-logo / header-navi）

・ Element名から、どのBlockに関連しているクラスなのか判断できる。
（例：header-navi__list / header-navi__item）

・ クラス名から影響範囲が予測できるので、想定外なレイアウト崩れがおきにくい。

・ 要素タグ（nav / ul 等）を基本的に使用しないので、スタイルがHTML構造に依存していない。
そのため、あとからHTMLを変更することができる。

3. FLOCSSについて

FLOCSSとは「Foundation Layout Object CSS」の略で、CSSファイルを「3つのレイヤー」と「3つの子レイヤー」に分けて管理する手法です。提唱したのは日本人の谷拓樹氏で、公式ドキュメントが日本語のため、わかりやすくて助かります。

Foundation
– サイト全体のデフォルトスタイルを定義します。（reset.scss / base.scss 等 ）
Layout
– ページを構成する大きなレイアウトを定義します。（header.scss / main.scss 等）
Object
– サイト内で再利用できるモジュールを定義します。ファイルはいずれかの子レイヤーに配置。
└ Component
– サイト内で再利用できる最小単位のモジュールを定義します。
（c-breadcrumb.scss / c-button.scss 等）
└ Project
– いくつかのComponentと他の要素で構成されるモジュールを定義します。
（p-ranking.scss / p-modal.scss等）
└ Utility
– ComponentやProjectで解決できないスタイル調整を定義します。
（u-clearfix.css や u-spacer.css等）

3-1. FLOCSSの記述法

FLOCSSではクラスの命名規則にBEMを採用しています。さらにクラスが属しているレイヤーによって、接頭辞（プレフィックス）を付与します。

・ Componentなら「 .c- 」
・ Projectなら「 .p- 」
・ Utilityなら「 .u- 」

記述サンプル例：

3-2. FLOCSSのメリット

・ クラスにFLOCSSの接頭辞をつけることで、クラスの役割が予測しやすい。どこでも流用できるComponentなのか、ページ独自のProjectなのか、一目で判断できるので非常に便利です。

・ 定義済みのCSSがレイヤー構造から把握できるので、検索がしやすく再利用も容易です。

・ CSSファイルをレイヤーで細かく分割することで、ページ数の多い大規模サイト制作でもスタイルの管理が容易になります。

おわりに

今回は「CSS設計」の手法からBEMとFLOCSSについて紹介しました。

これらの手法は知っておくと非常に便利なものではありますが、自己流のやり方でもサイト制作は可能です。そのため「今はまだ使わなくていいや」「学習コストがかかりそう」と敬遠しがちです。しかし、WEBデザイナーとして日々の業務を効率良く行う上では、欠かせないスキルです。

今まで意識せずに書いていた方は、一度経験すればその便利さを実感することができます。
ぜひWeb制作に取り入れてみてください。

弊社では士業やメディア、医療関係を中心にサイト制作を行っております。webサイトについてお悩みのある方はお気軽にお問い合わせください。