LIVESENSE ENGINEER BLOG

リブセンスエンジニアの活動や注目していることを発信しています

就活会議トップページをリニューアルしたときの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のコーディング規約としてルール化しています。

  • ElementのElementは作らない
  • ファイル数が増えるのを許容して細かくProjectファイルを切り出す

この2点により

  • クラス名が長くなることを避けられる
  • 各ファイルの行数を少なくすることにより、ファイルの見通しが良くなる
  • ProjectをComponentにする際の変更が容易になる
  • HTML構造が変わった際に、クラス名を変更することを避けられる
  • Viewを見た際に、開発者がどのファイルを見ればいいかすぐにわかる

というメリットが得られます。 そのため、就活会議ではElementのElementを許可せず、Projectファイルを小さく切リ出す方針をとりました。

簡単ではありますが、トップページの実例を用いて就活会議のCSS設計についてご紹介しました。CSS設計の参考になれば幸いです。