16卒で入社したエンジニアの田口です。 就活会議というメディアで、主にフロントエンド開発を担当しています。5月にトップページをフルリニューアルしましたので、その時のCSS設計についてお話しいたします。
就活会議のフロントエンド開発では、FLOCSSを採用しています。
1カラムのレイアウトの場合、2,3カラムの場合と比較して
- どのパーツをLayoutにすべきか
- どこまで細かくProjectとしてきり出すべきか
が曖昧になりやすく、開発者同士の議論が増え、コードの修正も多くなりました。
そこでパーツ単位の実例を、「ファーストビュー」と「企業口コミ」の2つを用いて、トップページのCSS設計について解説していきます。
トップページのファーストビュー
こちらのトップページのファーストビューでは、背景に動画を流し、その上にヘッダーパーツ、真ん中にメッセージパーツ、その下にテキストパーツがある構成になっています。このような場合、どのような設計をするのが適切でしょうか?
Layoutのクラスを作るべきか、Projectの単位はどうするのか、など悩みどころは多いかもしれません。 今回は以下のクラス設計で実装しました。Firebug等で実際に確認していただければと思います。
ポイントとしては、Layoutの責務とProjectの責務を明確に分離したことです。 l-top-visualというファイルにファーストビューのLayoutに関するクラスをまとめています。
_top-visual.scss //------------------------------ //トップページのビジュアルのスタイル //------------------------------ .l-top-visual {} .l-top-visual__video {} .l-top-visual__filter {} .l-top-visual__header {} .l-top-visual__message {} .l-top-visual__appeal {}
今回はabsoluteで、ヘッダーや中心のメッセージパーツなどの位置を指定しているため、場所を指定する要素はLayoutに書き、その中にProjectファイルでパーツのクラスを入れました。 他にもposition指定は1つのファイルにまとめておきたかったいう理由もあります。
一般的にLayoutのクラスはl-header
, l-sidebar
のように汎用的に使うことを想定されています。
しかし、今回はProjectファイルにLayoutの要素を持たせるのをやめて、Layoutの責務とパーツ単位の責務を明確に分離する方針をとりました。
企業口コミのパーツ
続いてこちらの企業口コミのパーツです。1つのProjectファイルで設計した場合、以下のようになるかと思います。
_top-word-mouths.scss //----------------------------------- //トップページの口コミ、口コミパネルのスタイル //----------------------------------- .p-top-word-mouths {} .p-top-word-mouths__title {} .p-top-word-mouths__desc {} .p-top-word-mouths__content {} .p-top-word-mouths__content-inner {} .p-top-word-mouths__panel {} .p-top-word-mouths__panel__img {} .p-top-word-mouths__panel__img-mask {} .p-top-word-mouths__panel__img-text {} .p-top-word-mouths__panel__content {} .p-top-word-mouths__panel__content-company {} .p-top-word-mouths__panel__content-star {} .p-top-word-mouths__panel__content-star-text {} .p-top-word-mouths__panel__content-category {} .p-top-word-mouths__panel__content-text {} .p-top-word-mouths__panel__btn-area {} .p-top-word-mouths__panel__btn {} .p-top-word-mouths__panel__img {}
各クラスの要素を書いていないためわかりにくいですが、1ファイルでコードが200行を超えてしまい、かつElementのElementが存在してしまいます。 最初はこのように設計していたのですが、最終的には
- .p-top-word-mouths
- .p-top-word-mouth-panel
の2つのプロジェクトファイルに分けて作成しました。
各ファイルのクラスは以下のようになっています。
_top-word-mouths.scss //------------------------------ //トップページの口コミのスタイル //------------------------------ .p-top-word-mouths {} .p-top-word-mouths__title {} .p-top-word-mouths__desc {} .p-top-word-mouths__content {} .p-top-word-mouths__content-inner {}
_top-word-mouth-panel.scss //----------------------------------- //トップページの口コミのパネルのスタイル //----------------------------------- .p-top-word-mouth-panel {} .p-top-word-mouth-panel__img {} .p-top-word-mouth-panel__img-mask {} .p-top-word-mouth-panel__img-text {} .p-top-word-mouth-panel__content {} .p-top-word-mouth-panel__content-company {} .p-top-word-mouth-panel__content-star {} .p-top-word-mouth-panel__content-star-text {} .p-top-word-mouth-panel__content-category {} .p-top-word-mouth-panel__content-text {} .p-top-word-mouth-panel__btn-area {} .p-top-word-mouth-panel__btn {}
この粒度であれば、1つのProjectファイルにまとめても良いかもしれませんが、 就活会議では以下をHTML・CSSのコーディング規約としてルール化しています。
- ElementのElementは作らない
- ファイル数が増えるのを許容して細かくProjectファイルを切り出す
この2点により
- クラス名が長くなることを避けられる
- 各ファイルの行数を少なくすることにより、ファイルの見通しが良くなる
- ProjectをComponentにする際の変更が容易になる
- HTML構造が変わった際に、クラス名を変更することを避けられる
- Viewを見た際に、開発者がどのファイルを見ればいいかすぐにわかる
というメリットが得られます。 そのため、就活会議ではElementのElementを許可せず、Projectファイルを小さく切リ出す方針をとりました。
簡単ではありますが、トップページの実例を用いて就活会議のCSS設計についてご紹介しました。CSS設計の参考になれば幸いです。