はじめに
手っ取り早くCSS設計の学習をしたい方のために、「とにかくこれだけをやっておけば大丈夫」というCSS設計のポイントを書きました。
実際の業務に役立つレベルの実用的なCSS設計のポイントが素早く学習できます。
とてもやさしいCSS設計チュートリアルの特徴
「とてもやさしいCSS設計チュートリアル」はとにかく簡単に実用的なCSS設計が学べます。
手を動かして、その後に解説を読みながら復習するサイクルでスイスイ理解が進むようになっています。
ページの完成まで作りながら学べるのでBEMとSCSSでCSS設計をする際の具体的な例が学べます。
対象としている読者
この記事は以下のような方を対象としています。
- Sassをインストールできる
- SCSSファイルをコンパイルしてCSSファイルを生成できる
- CSSでページレイアウトをだいたい作成でき、長期的なメンテナンスを考慮したCSS設計を学びたい
- 基本的なCSSセレクタの書き方がわかる
- 基本的なSCSS記法がわかる
とてもやさしいCSS設計チュートリアルでわかること
以下のようなことがわかります。
- BEMの命名規則
- CSSを管理しやすくするディレクトリ構造やファイル構成
- 再利用しやすいモジュールを作成するためのポイント
- 後で困らないmarginの設定の仕方
- moduleとlayoutの役割の分け方
- ページを作る場合のモジュールの組み合わせ方の実例
とてもやさしいCSS設計チュートリアルで詳しく説明していないこと
あくまでもCSS設計に焦点を絞って説明しており、以下のようなことは断片的に検索しても答えが見つかりやすいことなので、詳しくは説明していません。
- モジュールを構成する一つひとつのCSSプロパティの意味
- モジュールを構成する一つひとつのHTMLタグの意味
CSS設計の目的と優先順位
主に以下の目的と優先順位があると考えています。
- 各セレクタの影響範囲を把握しやすくする
- どういうモジュールがあるのか把握しやすくする
- モジュールの汎用性を維持することで余計なコードを減らす
上述した1と2を徹底することで、壊れ難い状態を維持していくことを「とてもやさしいCSS設計」では重要視しています。
無理に再利用することを考えず、この優先順位を心に留めてCSS設計を実践していきましょう。