(cache) IGNITIONのCSSリファクタリングでやって良かった4つのこと

こんにちは、エンジニアの手塚です。

nanapiではnanapi・アンサー以外にも様々なサービスを運営しているのですが、ご存知でしょうか。今回はその内の1つのIGNITIONで行っているCSSリファクタリングについてお話します。

IGNITIONとは、日々の生活に「刺激」や「動機」を与えるメディアです。モットーは、コンテンツを通じて高品質なユーザー体験を提供し、読者が能動的になるきっかけ（動機）を与えることです。

リファクタリングに至るまでの経緯

開発はデザイナーがコーディング、エンジニアが組み込みを担当しています。スピードを優先して2度の構造変更を行ったところ、HTML/CSS設計の整合性がとれなくなってしまいました。

このままでは、今後の開発の中でコーディングがボトルネックになると判断してリファクタリングに着手しました。

実際にやったこと

前提

SMACSSの概念をベースに、Moduleの設計をBEM的に行っています。

1.SCSSをモジュール単位にまとめた

レスポンシブ部分を一つのscssファイルで管理していたため、該当部分を探すだけで苦労していました。そこでSMACSSの考え方に基いてモジュール単位でSCSSを分割しました。メディアクエリもその中で記述するように変更しました。

やってよかったこと

修正する際もそのファイルだけを見ればOK、マージする際もDiffが見やすくなりました。

2.疎結合なクラス設計にした

他モジュールに依存しているモジュールがあったり、大きなモジュールを変更すると色々崩れてしまうことがありました。SMACSSの考え方に基いてモジュールはどこに置いても正しく表示されるよう疎結合なクラス設計にし、一意なクラス名を付与しました。

やってよかったこと

新しくモジュールを追加する時の設計が楽になったり、HTMLに付与されるクラス名も明確なので組み込みが楽になりました。

またモジュールを削除する時もそのファイルを削除するだけで削除できるようになりました。

落とし穴

モジュールを違うレイアウトで呼び出す場合は、「layout-header」などと併せて指定して、レイアウトスタイル側で差分を吸収するようにしています。下記のコードは.article-listを.headerと.contentで表示する際に、.headerでは中央揃え、.contentでは左揃えにする時の例です。

<header class="header">
  <div class="article-list layout-header">
    <h1>articleのリストです</h1>
    <ul>
      <li class="article-list__item"><a href="">article</a></li>
    </ul>
  </div>
</header>
<div class="article">
  <div class="article-list">
    <h2>articleのリストです</h2>
    <ul>
      <li class="article-list__item"><a href="">article</a></li>
    </ul>
  </div>
</div>

<h1>articleのリストです</h1>

<ul>

<li class="article-list__item"><a href="">article</a></li>

</ul>

</div>

</header>

<h2>articleのリストです</h2>

<ul>

<li class="article-list__item"><a href="">article</a></li>

</ul>

</div>

.article-list {
  text-align: left;
}
.layout-header.article-list {
  text-align: center;
}

.article-list {

text-align: left;

}

.layout-header.article-list {

text-align: center;

}

3.セレクタの深度を最小限にした

SassなどのCSSプリプロセッサを使っているとセレクタをネストしがちで、要素を上書きするためにわざわざセレクタを深く指定することがありました。そこでBEMの考え方に基いて一意なクラス名を使い要素セレクタを制限ことで、セレクタの深度を最小限まで浅く・階層をフラットにしました。

やってよかったこと

HTMLへの依存性をなくして、HTMLの変更があった場合でもCSSの変更の必要がなくなりました。他にもbaseで設定したスタイルの上書きも階層を意識せずに記述することができました。

4.共通の部分をextendした

一意なクラス名をつけると、シェアボタンをメディア別に分けた時にも一意なクラス名にわける必要があるため、重複したコードを書くことになってしまいます。それを避けるためにSASSの@extendを使いました。

%share-button__item {
  display: inline-block;
}
.share-button__item-facebook {
  @extend %share-button__item;
  background-position: 0px 0px;
}
.share-button__item-twitter {
  @extend %share-button__item;
  background-position: 0px 30px;
}

%share-button__item {

display: inline-block;

}

.share-button__item-facebook {

@extend %share-button__item;

background-position: 0px 0px;

}

.share-button__item-twitter {

@extend %share-button__item;

background-position: 0px 30px;

}

やってよかったこと

CSSのコードをDRYに保つことができるようになりました。またclearfixなどをextendすることでソース側でも回り込みの解除を把握することができるようになりました。

さいごに

ということで、IGNITIONのCSSリファクタリングでやって良かったことをご紹介しました。

SMACSS・BEM・OOCSSなど様々なやり方に共通しているのは、サイトの構成に応じてやり方を一貫させることだと考えています。まだまだ着手したばかりで迷いもありますが、ガチガチに考えすぎずに柔軟にリファクタリングを進めていきたいです。