はじめに
以前から「CSSでページの装飾をすることはできるが、その後の長期的なメンテナンスをするためのCSS設計の仕方がわからない。」とか「SMACSSやBEMなどのCSS設計手法があることは知っているが具体的にどう使ったら良いのかわからない。」など、CSS設計について相談を受けることが多くありました。
断片的な入門記事は多く見かけますが、それだけでは具体的にどのように書いて良いかわからないという方はまだ多数いるように感じたため、BEMのクラス命名規則とSCSS記法で具体例を書きながら中野ピク氏流の「とてもやさしいCSS設計」を紹介していくことにしました。
ご存知の方も多いと思いますが、BEMとは、Block・Element・Modifierの頭文字をとったもので、Yandex社によって提唱されたフロントエンドのアセット管理手法です。
BEM公式ドキュメント: https://en.bem.info/
BEMでは、CSSのクラスを役割ごとにBlock・Element・Modifierという3種類に分類し管理します。
Block・Element・Modifierそれぞれのクラス命名規則については、公式ドキュメントで紹介されているものの他に、以下のMindBEMdingと題された記事で紹介されているものが広く知られており、私もこの命名規則を使用しています。
https://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/
BEMの公式ドキュメントには、CSSファイルだけでなく、JavaScriptファイルを管理する方法や、Mixというクラスの付与の仕方など非常に多くのルールが定義されているのですが、この記事ではそれらを使用しません。
あくまでMindBEMdingと題された記事で紹介されているクラス命名規則（以降この命名規則をBEMと表現します）だけを利用します。
この「とてもやさしいCSS設計」は広く知られたBEMの命名規則とSCSS記法を使用し、覚えやすいシンプルなルールでCSS設計をすることで、Webサイトの長期的な運用におけるチームメンバーの増員や交代もしやすいものを目指しました。
ぜひこの記事の情報を利用して、役立てていただければと思います。
とてもやさしいCSS設計チュートリアルの特徴
「とてもやさしいCSS設計チュートリアル」はとにかく簡単に実用的なCSS設計が学べます。
手を動かして、その後に解説を読みながら復習するサイクルでスイスイ理解が進むようになっています。
ページの完成まで作りながら学べるのでBEMとSCSSでCSS設計をする際の具体的な例が学べます。
対象としている読者
この記事は以下のような方を対象としています。
- Sassをインストールできる
- scssファイルをコンパイルしてcssファイルを生成できる
- CSSでページレイアウトをだいたい作成でき長期的なメンテナンスを考慮したCSS設計を学びたい
とてもやさしいCSS設計チュートリアルを行ってわかること
以下のようなことがわかります。
- CSSを管理しやすくするディレクトリ構造やファイル構成
- 汎用的なモジュールを作成するためのポイント
- ページを作る場合のモジュールの組み合わせ方の実例
とてもやさしいCSS設計チュートリアルで詳しく説明していないこと
以下のようなことは断片的に検索しても答えが見つかりやすいことなので詳しくは説明しません。
- モジュール一つひとつのプロパティの意味など