LIVESENSE made*

リブセンスのエンジニアやデザイナーの活動や注目していることをまとめたブログです。

MENU

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

16卒で入社したエンジニアの田口です。 就活会議というメディアで、主にフロントエンド開発を担当しています。5月にトップページをフルリニューアルしましたので、その時のCSS設計についてお話しいたします。

就活会議のフロントエンド開発では、FLOCSSを採用しています。
1カラムのレイアウトの場合、2,3カラムの場合と比較して

  • どのパーツをLayoutにすべきか
  • どこまで細かくProjectとしてきり出すべきか

が曖昧になりやすく、開発者同士の議論が増え、コードの修正も多くなりました。

そこでパーツ単位の実例を、「ファーストビュー」と「企業口コミ」の2つを用いて、トップページのCSS設計について解説していきます。

トップページのファーストビュー

f:id:livesense-made:20170629122439p:plain

こちらのトップページのファーストビューでは、背景に動画を流し、その上にヘッダーパーツ、真ん中にメッセージパーツ、その下にテキストパーツがある構成になっています。このような場合、どのような設計をするのが適切でしょうか?

Layoutのクラスを作るべきか、Projectの単位はどうするのか、など悩みどころは多いかもしれません。 今回は以下のクラス設計で実装しました。Firebug等で実際に確認していただければと思います。

f:id:livesense-made:20170725151127p:plain

ポイントとしては、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の責務とパーツ単位の責務を明確に分離する方針をとりました。

企業口コミのパーツ

f:id:livesense-made:20170629123311p:plain

続いてこちらの企業口コミのパーツです。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つのプロジェクトファイルに分けて作成しました。

f:id:livesense-made:20170706180343p:plain

各ファイルのクラスは以下のようになっています。

_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設計の参考になれば幸いです。