こんにちは、デザイナーの宇田川です
突然ですが、チーム開発をしていて、cssの運用で困ったことはありませんか？？
例えば、
- このスタイルを変更して、他のページに影響が出そうだから修正していいか分からない.......
- デザインが似たページをつくる時に、コードを再利用するのに問題はない？
- スタイルを修正したら、他のページのデザインが崩れてしまった....orz
など、スタイル設定が少ないサイトや1人でコーディングしているならまだいいのですが、
大規模なサイトになってくると、複数人でのチーム運用をすることになるので、
1人1人が自分のやり方でコーディングすると、非常にメンテナンス性の悪い（コストがかかる）運用になってしまいます。
そこで、今回は、サイトの規模、チームの人数にも関係なく有用なメンテナブルcssをご紹介します。
まず初めに
PIXTAでは、5人のデザイナーがサイト運用しています。
全員がコードを統一できるように、cssのルールを設定しています。
クラス名
見た目からでなく、目的や役割に基づいてclass名前をつける
- クラス名は小文字で、ハイフンを使う（アンダースコアではなく）。
- 過度な省略は避ける。例えばbuttonに対して.btnは分かりやすいけど、.btはなんの意味も無い。
- 意味のある名前にすること。見た目ではなく、機能や目的を意味する名前をつける。
- スタイルではなく、挙動を制御するためのクラスには.js-*をつける。そしてこのクラスはスタイル目的には使用しないこと。
/* 悪い例 */ .bt { ... } .red { ... } .header { ... } /* 良い例 */ .btn { ... } .important { ... } .global-header { ... }
これによるメリットは、
- クラス名を見れば何に使われているか理解することが容易になる
- クラス名がユニークになることにより、想定外の不具合にならない
- 自動化された機能テストで、特定の要素を探す時に役立つ
BEMの活用
エレメント（Element）
エレメントはアンダーバー2個で統一
※クラス名を区切る場合は、ハイフンで
階層が深くなった場合、クラス名が長くなってしまうので、ブロック（親）の名称を継承する
・2階層の場合の例 <div class=”search-form”> <div class=”search-form__inner”> </div> </div> ・2階層以上の場合の例 <div class=”search-form”> <div class=”search-form__inner”> <div class=”search-form__keyword”> </div> </div> </div>
モディファイア（Modifier）
モディファイアはハイフン2個で統一
<button class="btn btn--medium" type="submit"> カートに追加する </button> クラス名が長くなってしまう場合は、下記で対応 ※エレメントの最後の名称を継承 × <section class="plans-table__type plans-table__type--col-3"> ○ <section class="plans-table__type type--col-3">
複数クラスを適応する場合は、半角スペース2個で記述
複数スタイルを書く場合は、可視性を考慮して半角スペース2個で見やすくする
×半角1個の場合 <button class="btn btn--medium" type="submit"> カートに追加する </button> ○半角2個の場合 <button class="btn btn--medium" type="submit"> カートに追加する </button>
これによるメリットは、
- コンポーネント化に対応できる
- cssの同じプロパティーを統一でき、重複する設定を省略できる
- ソースの可視性の向上
コンポーネント化によるcss管理
PIXTAでは、cssをコンポーネント単位で分けて運用しています。
今までは、ページごとにcssを用意して運用していたのですが、
1つのcssが1,000行以上になってしまっていて
可視性や、メンテナンス性が悪かったのです......
PIXTAでは、マイクロサービス化をしているので、
ここでは、検索のマイクロサービスのファイル構成を参考に説明します。
cssフォルダ構成
components ｜ _layouts.scss ｜ _heading.scss ｜ _sidebar.scss details ｜_layouts.scss pages ｜ _category-index.scss
cssファイルは、一部しか記載していませんが。。（本当はもっと沢山あります）
ここでは、フォルダ構成を簡単に説明します。
まず、componentsフォルダには、ページで共通で使用するレイアウトが
ブロックごとにcssをコンポーネント化しています。
pagesフォルダは、固有のページ（そのページでしか使用しない設定を入れています）
コンポーネント化するメリットは、ブロック（レイアウトごとの部品）で分けているので、
その箇所の設定を管理しやすく、また、上記で説明した、BEM化により、
コンポーネント固有のクラス名になっているので、修正した箇所以外には影響しないです。。
※もちろん、クラス命名規則を作成しておくのが前提です！
つまり、、、ここ直すのが怖い、このクラス他に影響してないかな・・？？
が解消できるのです。
また、デザインのレイアウトの一部が変わった場合、ファイル単位で削除して、
新レイアウトに合った、cssを新しく作成するだけなので、
ファイル整理もできます！
最後に
PIXTAでは、頻繁にデザインレイアウトの変更をしています。
また、多言語対応をしているので....
ここでポイントとなってくるのは、
スタイルを再利用しない
です。
本当に共通の部品は、共通化のスタイルを設定してますが、
パーツ単位のclass名を再利用するとHTMLの肥大化につながり
例 <div class="box1 grid under red left"></div>
こうなるとスタイルを維持することが難しくなり、運用パフォーマンスが低下します。
PIXTAでは、似たようなレイアウトでも共通化できない場合（少しでもレイアウトが変わる場合）は
スタイルを複製もしくは、新しく作成するアプローチを採用しています。
これにより、修正しても他に影響がでず、メンテナンス性に優れているからです。
チーム開発をしているデザイナーのみなさまも、
自分のサイトに合った、メンテナブルcssを設計してみてはいかがでしょうか！
