Zenn
📖

メンテナンスしやすいCSSを書こう

2024/12/06に公開
CSS
Scss
bem
flocss
tech

まえがき

みなさんはCSS書いたことありますか？
今の時代、プログラマーでなくても、WordPressとか、ちょっとしたHTMLとかで触ってるひとも多いかと思います。

しかしながらサイトが業務レベルの規模になってきて、複数の画面のCSSを共通化したりすると、段々と他の箇所の修正が思わぬ箇所に影響を及ぼしてきて、管理が大変になってきます。

最終的にはテキストをほんの少しズラすだけでも莫大な労力が必要になったりします。
これに関しては何十年も前からフロントエンドエンジニアによって議論が行われてきました。

その中でも私のオススメの手法を紹介します。

FLOCSSパターンをカスタマイズして使う

FLOCSSを学ぶと以下のメリットがあります。

・新しいデザインを追加するのが楽になる。
・どこを変更すれば良いか迷わない。
・他のプロジェクトでも応用が効く。

前提としてBEMを覚える。

FLOCSSパターンはBEM記法の有効活用法の１つです。
じゃあBEM(Block、Element、Modifier)って何かというとHTML要素を
・ターゲットの要素
・ターゲット要素の子要素
・状態表現
に分ける手法です。
※私なりにわかりやすく説明しているつもりで独自の解説をしています。
こんな説明は他にありません。
BEMでググれば他の人の説明も出るので、いくつかみてイメージ掴むのがよいと思います。

こういうコードです。
BEMは現代のCSSの基本ですので、CSS担当じゃない人も他の人が書いているのでこういうCSSクラス名を見たことある人も多いと思います。
公式にはアンダーバー２つで要素と子要素をつなぎ、ハイフン２つでその要素の状態を表現することになっています。
ボタン「の」アイコン、ボタン「の」テキストでという関係で「の」= 「__」 であり、
「活性化している」ボタン、のように状態を表す関係が「--」ということです。
色の違いバージョンの違いも「--」で繋いでいたりしますが、ざっくり状態とと捉えて書かれているわけです。そのへんは書き手の感性やターゲット要素の性質に依存するので具体的に高さや幅はエレメントで色はモディファイアと捉えると迷いが多くなります。

main.html
<div class="button button--active">
  <span class="button__icon">🌟</span>
  <span class="button__text">Click Me</span>
</div>

ここで注意点ですが、AのBのCって書きたくなったからといって以下のようにズラズラつなげていくわけではありません。
A__B、B__C のように繋ぐのが基本です。絶対やっちゃだめってわけではなく、一定のルールのもとにカスタマイズしていればOKです。
３つまでは繋いでいいとか。
じゃないと10段ネストしてる要素だったらA__B__C__D__E__F__G__　・・・ってとんでもなく長いクラス名になってしまいます。
なによりそのクラスは一切使いまわせなくなります。

main.html
<div class="input-form">
    <div class="button input-form__button--active">
      <span class="input-form__button__icon">🌟</span>
      <span class="input-form__button__text">Click Me</span>
    </div>
</div>

FLOCSSパターンとは

FLOCSSは、CSSを 3つの役割（Foundation・Layout・Object）に分けて整理するルールです。
これにより、プロジェクトが大きくなっても迷子にならず、また改修による意図しない箇所のデグレが起きにくくなります。

FLOCSSの基本的な構成は以下のようになります。
クラス名には接頭辞をつけることが基本となります。

・Foundation
「全体の基盤」となるスタイルです。
色、フォントサイズ、リセットCSSなど、共通して使う設定をここに集めます。
・Layout
「ページ全体の骨格」を作る役割です。
ヘッダー、メインコンテンツ、フッターなどの配置に関するCSSを記述します。
・Object
「具体的なUIコンポーネント」を作ります。
ボタン、カード、モーダルなど、再利用できるデザインの要素です。
前項で説明したBEM記法はここで活用します。

アサインされたプロジェクトでこんなフォルダ名を見たことある人もいると思います。

<div class="l-container">
  <header class="l-header">...</header>
  <main class="l-main">
    <div class="button p-button--primary">
      <span class="p-button__icon">🌟</span>
      <span class="p-button__text">Click Me</span>
    </div>
  </main>
  <footer class="l-footer">...</footer>
</div>

Objectは更に以下に分類されます。

・Component
ボタンやカードのような再利用可能なUIパーツを作る。
コンポーネントでは基本的な形状を定めておき、例外はプロジェクトレイヤーで行います。

・Project:
特定のページや機能専用のスタイルを作る。
FLOCSSのメイン部分です。
ここは画面が増えるたびに増えていきます。
書くdivの特有のマージンやパディングだったり、細かく決めていきます。
さらにコンポーネントクラスを上書きして、この場所のボタンは幅や色を変える、などの微修正を行います。

・Utility:
小さく汎用的なスタイルを提供する。

これはBootstrapのmt-3とかと同じものですので分かりやすいと思います。

.u-text-center {
  text-align: center;
}

FLOCSSをカスタイマイズする。

FLOCSSパターン自体は汎用的なパターンですので、これを自分の案件に合わせてカスタマイズして具体的なコーディングにします。

例えば複数人で開発しているとレイアウトレイヤーは認識がズレやすいので、そもそも配置せずプロジェクトにまとめたりします。

また、BEM記法に接頭辞をつけるため、クラス名の長さを押させるために、私ならハイフン２つやアンダーバー２つは１つに減らします。

プロジェクトレイヤーのクラスで、特定画面に関するものは画面コードを付与します。
そうすることで他の画面への意図しない影響を制限します。
レイアウトレイヤーに画面コードを付与する場合もあります。

  <div class="l-A01-container"><!-- A01画面特有のレイアウトにできる -->
  <header class="l-header">...</header>
  <main class="l-main">
    <div class="button p-button--primary">
      <span class="p-button__icon">🌟</span>
      <span class="p-button__text">Click Me</span>
    </div>
  </main>
  <footer class="l-footer">...</footer>
</div>

あとはフォルダ階層にLibフォルダを追加しています。
そこにjsライブラリ専用スタイルなどを入れて区別します。
こうすることでクラス名の規則性の崩れを吸収します。

おわりに

FLOCSSもBEMも１ページで語り尽くせるようなものではありませんが、習得すればもう他のやり方には戻れなくなる強力な手法です。
ぜひ、色々調べてモノにしてみてください。

株式会社ONE WEDGE

【Serverlessで世の中をもっと楽しく】 ONE WEDGEはServerlessシステム開発を中核技術としてWeb系システム開発、AWS/GCPを利用した業務システム・サービス開発、PWAを用いたモバイル開発、Alexaスキル開発など、元気と技術力を武器にお客様に真摯に向き合う価値創造企業です。
https://onewedge.co.jp

Discussion