📝

CSSの管理が雑になったときに見直すCSS設計入門

2021/06/04に公開

CSS

Scss

CSS設計

tech

最初はコーディングでCSSのクラス名がわかりやすく決まってきたけど、デザイナーやディレクターと修正を重ねるうちにどこに何をスタイリングしたかわからない…。

このような経験、複数人でのコーディング作業や既存ページのリニューアルをした方なら結構あるかと思います。

CSSのクラス名やスタイリングの順序や仕方など、それぞれ個人のやり方で実装すると、あとで修正する際にかなり面倒なことになります。

普段、コーディングしていてCSSが汚いなー、HTMLとCSSを行ったり来たりを繰り返しているなー、というときにおすすめなのがCSS設計という手法。

今回は、CSS設計の概要や特徴からゆるくはじめる方法などをまとめました。

CSS設計とは

CSS設計とは端的に言うと、CSSを記述するためのルールのこと。

チームでのコーディングや、既存ページのリニューアルとかをしたことがある人ならわかるかと思いますが、HTMLのクラス名やCSSの書き方がバラバラだと、スタイリングしている場所を1つ探すだけでもかなり手間になります。なので、クラス名、CSSの書き方や順番などもある程度規則で決めて指定する、というのがCSS設計。

もう少し具体的な例として、ボタンのスタイリングをする際1つをとっても、

.cta-button{}
.button{}
.btn{}

人によっていろいろなクラス名がつけられてしまいます。
また、<button style="background-color:#333;">のようにインラインスタイルでCSSを当てているかもしれません。

人によってCSSを書くルールがばらばらである以上、このように複雑なコードになってしまいます。そうならないよう、CSSの命名規則と構成を考えるというのがCSSということですね。

CSS設計の特徴・条件

CSS設計は、以下の4つの特徴のような前提条件があります。

予測しやすい：クラス名を見て何をするクラスなのかが判断できるかどうか
再利用しやすい：クラスをさまざまな場所で利用できるかどうか
保守しやすい：定義されたクラスがどこにあるかわかりやすいかどうか
拡張しやすい：再利用する際に部分的に異なるカスタマイズが簡単かどうか

予測しやすい

予測のしやすさは、クラス名を見て何をするクラスなのかが判断できるかどうか。 よくあるやり方は、機能の名称をクラス名にするパターン。何をスタイリングしているかわかりやすいことが大事ですね。

予測のしやすさは、主にHTMLのクラス名を決める際に配慮が必要になります。

<nav class="g-navi">
<ul class="list">

再利用しやすい

再利用のしやすさは、ベースとなる要素やパーツをつくって必要な箇所で呼び出せるかどうか。

再利用のしやすさは、主にCSSのスタイリングの際に配慮する必要があります。

.c-card img{
  width:100%;
}
p-contents .c-card{
}

保守しやすい

保守のしやすさは、定義されたクラスがどこにあるかわかりやすいかどうか。 セクションごとにCSSの記述を分けることでスタイリングの変更がやりやすくなります。

保守のしやすさは、主にCSSの記述やSCSSのファイル分けで配慮する必要があります。 このように、機能ごとにファイルを分けることが多いですね。

_card.scss
_title.scss
_gallery.scss

拡張しやすい

拡張のしやすさは、再利用する際に部分的に異なるカスタマイズが簡単かどうか。 再利用しやすいパーツを、一部分だけ変えたいときに簡単に変えられることが重要です。

拡張のしやすさは、HTMLのクラス名を決める際とCSSのスタイリング両方で配慮しましょう。
よくあるのは、カラーのスタイリングを変えるとき。一部分だけカラーリングを変えたいときはこんな感じでコーディングします。

<a href="#" class="button">click!</a>
<a href="#" class="button--skyblue">click!</a>
<a href="#" class="button--pink">click!</a>

.button{
  font-size:1.6rem
  &--skyblue{
    background-color:#61d1f2;
}
  &--pink{
    background-color:#e7403d;
}

ボタンのように単体でスタイリングできてかつ、色のバージョンの違いなどが必要なものは定義するファイルを決めておくとやりやすいです。

ボタンやタイトルなどベースとなるパーツをつくって必要な箇所だけ「--」で拡張部分をクラス名をつけておけば管理もしやすく見やすいですね。

CSS設計をはじめるにあたって

CSS設計は既に様々な種類があり、有名なものでいうとBEM、OOCSS、FLOCSSあたり。最近はBEMとFLOCSSが人気な印象です。

有名どころのCSS設計手法を参考にしながらやってみるとはじめやすいです。

ただ、いきなり綺麗にわけるのは無理ゲーなので、まずは自分が管理しやすそうなものからファイルを分けていくのがおすすめです。

特にやりやすいもので言うと、ページ内のボタンパーツやh2/h3タイトルタグのスタイリングなどは、保守性や再利用性などを考えながらつくりやすいのでおすすめ。
徐々にパーツごとのCSS設計に慣れてくれば、ヘッダー・フッターなどの共通部分のスタイリング、それが慣れたらナビゲーション、など広げていくとCSS設計に従った管理のしやすいコーディングができるようになってきます。

最後に

昨今ではコーディングは難しくないと散々言われています。

確かに、コーディング自体は視覚的にわかりやすくカンタンですが、チームで管理のしやすいコーディングをする！となるとかなり難しくなります。

複数人でのコーディング作業やリニューアルで躓いている方やコーディングスキルをブラッシュアップしていきたい方の参考になれば幸いです。