就活会議トップページをリニューアルしたときのCSS設計のお話

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のコーディング規約としてルール化しています。