【FLOCSS】変更に強いcss設計のためのガイド

未経験からエンジニアとしてweb制作会社へ入社し、はじめはscssのネストを利用して少し便利にcssを書く事ができる程度の知識でしたが、ページ数の多いwebサイトを制作・保守するうちにcss設計の大切を痛感し、どうすれば良いcss設計ができるのか、ひたすら考えた結果、ある程度自分の中でかたまってきたので書きます。

そもそもcssが破綻するとは

cssを書いたことのあるかたなら皆が通る道ですよね。

だれもが経験するcssが破綻したといえる状況をいくつかあげ、cssが破綻するとはどのような状況を指すのか説明します。

今から紹介するような事が起きないcssを書く事が良いcss設計と言えるでしょう。

詳細度を高めて上書きする

最も頻繁に発生するのではないかと思う『値の上書き』

あるデザインを再現したが、別ページで色が違う、文字の大きさが違う、など派生形が存在し、color,font-sizeなどを上書きするというようなパターンは多くの方が経験していると思いますが、適当にcssを書くと、以下のように詳細度を高めることで対応することになります。

上の2パターンのデザインを破綻しやすいcssの書き方で再現してみます。

<!-- パターン1 青背景-->
<div class="background-black-area">
　<div class="main-visual">
  　<div class="page-title">ページのタイトルが入ります。</div>
  　<a class="btn" href="#">
    　<i class="mail-icon"></i>
    　<span>お問い合わせはこちら</span>
  　</a>
　</div>
</div>


<!-- パターン2 白背景-->
<div class="background-white-area">
  <div class="main-visual">
    <div class="page-title">しろ背景にしたい！</div>
    <a class="btn" href="#">
      <i class="mail-icon"></i>
      <span>お問い合わせはこちら</span>
    </a>
  </div>
</div>

// パターン1 青背景
.main-visual {
  background-color: #2051C2;
  padding: 150px 100px;
  & .page-title {
    color: #fff;
    font-size: 42px;
    font-weight: bold;
  }
  & .btn {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    width: 300px;
    border-radius: 3px;
    padding: 16px 16px;
    margin-top: 28px;
    & .mail-icon {
      width: 15px;
      height: 10px;
      @include mailIcon(#2051C2);//こちらはメールアイコンを表示するためのオリジナル関数：無視で良い
    }
    & span {
      font-weight: bold;
      margin-left: 10px;
      font-size: 16px;
      color: #2051C2;
      text-decoration: none;
    }
  }
}


// パターン2 白背景にするために初めのセレクタより、ネストし、詳細度を高めることで値を上書き
.background-white-area {
  & .main-visual {
    background-color: #fff;//←上書き
    border: solid 1px #000;//←上書き
    & .page-title {
      color: #2051C2;//←上書き
    }
  }
  & .btn {
    background-color: #2051C2;//←上書き
    & .mail-icon {
      @include mailIcon(#fff);//こちらはメールアイコンを表示するためのオリジナル関数：無視で良い
    }
    & span {
      color: #fff;//←上書き
    }
  }
}

このように、値を上書きするために詳細度を高めるようなcssの書き方をすると破綻しやすくなります。

今回は簡単＆パーツのみでしたので、少し実感しにくいですが、実際は、このパーツを囲う親などがあり、html構造が複雑になります。

その状態で次はボタンのサイズを変更して欲しい、制作途中で○○のページだけボタンの色をオレンジにしたい、など、デザイン変更の依頼が来た場合にすぐに対応できるでしょうか？

3パターン目にあたりにはいってくると、こちらの例ですら「あれ、値が上書きされない」という現象が起こってきそうです。

「あれ、値が上書きされない」となった時点でcssは破綻していると言えます。

詳細度がたかすぎて!importantを使う

上記の「詳細度を高めて上書きをする」の延長戦上に存在します。

詳細度が把握しきれず、上書きされない現象を解決するために「!important」を使用して強制的に値を上書くしかない状態に出くわすことがありますが、!importantを使用した時点でそのcssは破綻していると言えます。

!importantを使用するとこれ以上、上書きすることができなくなってしまうので、後々の変更に対応できなくなり、保守がとても大変になります。

別の場所のデザインがくずれた

Aのページのデザインを変更するとBのページのデザインが崩れる。

Cのパーツの上下の余白を変更するとDのパーツの余白が変わってしまう。

影響範囲がcssを書いた本人ですら把握できず、意図しない場所のデザインが変わってしまうcssは破綻していると言えます。

自分で影響範囲を認識しておくことはもちろんですが、他の人がドキュメントを見たり、少し調べるだけで影響範囲を理解できる設計にすると保守性が向上します。

良いcss設計とは

良いcss設計とはどういったものでしょう。

良いcss設計についてgoogleのすごいエンジニアの方が提唱しているのでそちらを参考に自分なりの解釈を加えて説明します。＊原文を翻訳し、載せているわけではなく、あくまで自分の経験からの考えになります。原文はリンクからどうぞ。

良いcss設計とは[原文]

• 予測できる
• 再利用できる
• 保守できる
• 拡張できる

予測できる

class名からそのclass名を付けたパーツがどのようなデザイン、挙動をするのか予想きる。

また、あるclassの値を変更した際にどこが変化するのか影響範囲を予測でき、意図しない個所が変更されるという事を初めから回避できる。

『よくないcss設計』であげた、Aのページのデザインを変更するとBのページのデザインが崩れた何てことが起こらないcss設計が良いcss設計です。

再利用できる

Aの場所で使用したclassを使う事で新たにBというパーツを作ることができる。

『よくないcss設計』で上げた、詳細度を高めて上書きするの例で挙げた2パターンのデザインがあるような状態です。これ↓

似たようなデザインだが、若干違う。

この2つのデザインをコーディングするのにそれぞれコーディングしていてはcssの重複が起こり、コード量も膨大になり、同じものを記載する分、開発速度も落ちてしまいます。

ですので、過去に記載したcssを使いまわすことが良いcss設計ですが、値を上書きしまくると詳細度が把握しきれず、!importantを使用することになり、破綻してしまうので気を付けなければいけません。

保守できる

webサイトの最も大切な部分はそのサイトを運用し、利益を出すことです。

サイトを作ることよりも運用時の方が大切なのです。

運用フェーズに入ると、この機能を追加したい。ABテストのためにここのデザインを変更したい。というようなことが必ず発生します。

その際に、パーツを追加しただけでデザインが崩れる。パーツの場所を変更したり、html構造を変更するだけでデザインがくずれるというようなことが起こるとその部分を治すだけで一苦労です。

そのようなパーツの追加、変更を行っても崩れることのないcss設計が良いcss設計と言えます。

htmlを変化させたり、パーツを追加するとデザインが崩れるとはどのようなものか