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

「最終的な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）の規則に合わせたり、チームで慣れ親しんだ言語にあわせるのも統一基準となります。

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

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