CSS肥大化を抑える破綻しないコード設計とSassの導入

小規模なWebサイトや単体ページならいざ知らず、大規模Webサイトなどを開発する際、CSSが肥大化し、気付けば構造が破綻してしまうことはありませんか？今回はCSSを最小限におさめることを目標に効率的なワークフローを構築するポイントを紹介します。

DEVELOPER

M.S.

CSSの肥大化を抑える5つのポイント

Sassを活用
CSSの優先度を考える
スタイルの共通化、グループ化
scssによるファイルの分割
クラスの命名方法

Sassの活用

Sassとは

CSSの言語を拡張した、「メタ言語」です。
CSSの書式をベースとし、様々な機能を追加し、よりプログラミングに近い感覚でコード構築ができます。書き方により多様性が出せるため工夫次第で可読性、メンテナンス性、拡張性を大きく向上することができる可能性があります。

CSSのメタ言語と呼ばれるものは「Less」など、他にもいくつかありますが、の「SCSS記法」がわかりやすいです。
CSSの書き方をそのまま踏襲しているので、機能追加的な側面が強く、CSSの延長線上で直感的に書くことができます。

Sassでできること

Sassで特によく使うものを紹介します。

変数化
値を変数にすることができます。

//変数$color1 : #ffffff;
.hoge {color : $color1;}

入れ子（ネスティング）
プロパティを入れ子形式で書くことができます。

//入れ子
body {
 nav {
  ul {
   li {color : #ffffff;}
  }
  }
}

@mixin
引数をつかうことができます。

//mixin
@mixin font($fontColor:#ffffff) {
color : $fontColor;
}
.hoge{ @include font; }

@extend
継承することができます。

//extend
.box{width : 300px; height : 240px; }
.hoge{@extend .box; display : inline-block ;}

CSSの優先度に気をつけよう

CSSの優先度

CSSには優先度があります。セレクターを入れ子していくことでより優先度の高い記述となります。
それぞれの記述が入れ子しすぎて優先度の高い記述同士になり打ち消し合わないよう工夫が必要です。

特に気をつけたいポイントは以下の3点です。

!important
全ての優先度を無視して、この記述を最優先にします。
レスポンシブデザインなどになると、media queryで上書きするような構造になる事があると思いますが、その場合、同じようにimporantを使わないと上書きできない記述になり、構造によってはより優先度を高めた状態で!importantで打ち消す、と言った非常に編集しにくい記述となってしまう場合があります。
HTMLへのインラインCSS
現在、CSSを別ファイルにして管理することがほとんどです。
HTMLへのインラインCSSは、CSSでの記述より優先となってしまい、上書きするためには!importantを使うしかなくなるなど、上記を誘発する原因にもつながります。また、レスポンシブサイト構築時に上書きがしづらくなります。特別な理由がない限りインラインで記述することは避けましょう。
IDセレクタ
IDセレクタはclassより強い優先度を持ちます。
サイト設計にもよるのですが、最初に想定していない、後からの追加や、ブロックの使い回しが発生した時にclassへの変更を余儀なくされる、といったことが発生します。
サイト構築の初期段階で使い方の規則を決め、その範囲以上で使わないことを推奨します。

長過ぎる入れ子（ネスト）は避けよう

ネストはコンテンツごとのまとまりを作る感覚で書いてしまいがちですが必要のない記述を増やしてしまいます。
更にそれを打ち消すための長いセレクタがはびこるCSSは、メンテナンス性、可読性ともに悲惨なことになります。

ネストは3つまで、など決めてしまうのが良いでしょう。

.contents1{
.box{
 ul{
  li{
   a{font-size : 12px; color : #ff0000;}
  }
 }
}
}

スタイルデザインを共通化し、再利用する

同じクラス、スタイルを使う

同じレイアウトの部分は、コンポーネント化して共通のクラスなどでCSS記述を使いまわせるようにしましょう。
コンポーネント化とは、部品にするという意味です。

上記の「無駄なネスト例」のように一箇所でしか使えない記述の仕方では他の場所に同じスタイルを当てたい場合、同じ記述を改めて書くことになります。
サイト構造全体を見て共通のスタイルを部品にし、使いまわせるようにすることで同じ記述をもう一度書かなくて済みます。

共通化しすぎに注意

ここが似ているから、などと安易にクラスの共通化をしすぎてしまうとかえって共通でない部分を上書き、打ち消しなどで記述を増やしてしまうことがあります。
レスポンシブの場合であれば尚更、共通プロパティのみの記述を作っておき、@extendを使用するなど適度に共通・分離をしましょう。

scssファイルの分割

「最終的なCSSを最小限におさめる」ことが今回のCSSの肥大化を防ぐ目標ですが、実際に作業するファイルが肥大化してしまっていたら元も子もありません。
そこで、scssファイルを分割し、importをつかってマスターのscssに読み込みます。

reset.scss
animation.scss
responsive.scss

それぞれ「リセット用」「アニメーション用」「レスポンシブ用」とファイルを分割しています。
編集ファイルが分割化することで、1ファイルのコード量が減らせるため、コードの見通しが良くなるのと同時に大きいファイルを扱うときエディタなどで、表示や操作がもたつくといった現象を避けることができます。マスターにしたいstyle.scssなどに@importすることで、最終的に1つのcssにまとめることができます。

//外部化したscssの読み込み方（拡張子.scssは付けない）

@import 'reset','animation','responsive';

クラス名について

クラスの命名規則にはいくつか種類があり、よく耳にする名前といえば以下の3つがあげられます。

キャメル　mainTitle
スネーク　main_title
パスカル　MainTitle

個人的な意見としては、命名規則に大きな差はないと思います。
キャメルやパスカルなら短さ、スネークなら見やすさが重視されます。
また、組み合わせる言語（javaScript）の規則に合わせたり、チームで慣れ親しんだ言語にあわせるのも統一基準となります。

キャメル、スネーク、パスカルについて
いまさら聞けない「変数の命名規則」

CSSコーディングルール基盤となる考え方

命名規則にはいくつか考え方があります。
これらを元にCSS設計を考えることも1つ、CSSの肥大化の対策を考える事もできると思います。
詳しい説明は今回割愛させていただきますが、代表的な規則の名称とキーワードを載せておきます。

BEM（Block Element Modifier）
classを3つ（ブロック、要素、修飾）に分類し、命名します。命名は長くなりがちですが、どこのスタイルかがわかりやすくなります。block__element-modifier
SMACSS（Scalable and Modular Architecture for CSS）
5つのカテゴリ分類（ベース、レイアウト、モジュール、ステート、テーマ）をして設計します。体系化することでメンテナンス性に長けている書き方とされています。
OOCSS（Object Oriented CSS）
オブジェクト指向の考え方でCSSを命名、設計します。構造と装飾をわけ、記述する考え方です。

BEM SMACSS OOCSS
OOCSS BEM SMACSS FLOCSS 違い
BEM
BEMに基づいたCSS命名規則について考えてみた
OOCSS
すぐに実践できるCSS設計 OOCSSの基本を理解しよう

まとめ

いかがでしたでしょうか。
今回はSassを中心にCSSの肥大化を防ぐためのポイントを絞って紹介しましたが原因や対策が分かっていても実践ではうまくいかないもので、私もまだまだ手探り状態です。
次回は、今回あげたポイントを意識して行うために、まず本TIPSで重要視しているSassを導入、インストールするところから紹介していきます。
より見やすくかつ使いやすいCSSにするために一つずつ実践していきたいと思います。