てくすた

ピクスタ株式会社のエンジニア・デザイナーがつづるよもやまテクニカルブログです

メンテナンス性に優れたcss設計 - メンテナブルcss

こんにちは、デザイナーの宇田川です

突然ですが、チーム開発をしていて、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を設計してみてはいかがでしょうか!

recruit.pixta.co.jp