[css設計]自分流のflocss, bemをまとめてみた #CSS

はじめに

最近新規プロジェクトでcss設計をよく担当するのですが
初心者の人にも、経験者にもわかりやすいようにflocss,bemなどを取り入れています。
前回も記事を書きましたが、せっかくなのでもう一度まとめてみようと思います。

ディレクトリ構成(自分流flocss)

プロジェクトの規模にもよりますが、この構成で作成します。

- scss/
  - foundation/
    - reset.scss
    - variables.scss
  - layouts/
    - container.scss
    - header.scss
    - footer.scss
  - objects/
    - components/
      - button.scss
      - heading.scss
    - projects/
      - about/
        - index.scss
        - info.scss
        - form.scss
  - utility/
    - margin.scss
    - padding.scss
    - display/scss

各ディレクトリの解説

foundation

こちらのディレクトリにはサイトの基本となるcssの定義をする場所になります。
reset.cssや、変数を設定できるvariables.scssを置いています。

※ variables.scssとは、カラーコードを変数にセットし、各cssファイルで呼び出し使えるように定義する場所です。
よく使われるカラーコードや、z-indexなどの設定をしておくことでサイト全体のトンマナやデザインが変わったときにvariablesで定義されている値を変更するだけで済みます。

layouts

こちらはheaderやfooterやコンテンツの大枠など、サイト全体で使う骨組みの部分のcssを定義する場所になります。

objects

こちらは使い回しができるパーツのcssを定義する場所になります。

components

配下のcomponentsでは、ボタンや、見出しなど色々な箇所で使う小さい単位でのパーツのcssを定義する場所になります。
小さい単位というのは、曖昧ですが一つの独立したパーツというイメージで作成します。

記事のリストがある場合、サムネイル、見出し、テキストをcomponentsでそれぞれ作成する → ×
記事のリストがある場合、サムネイル、見出し、テキストを1つのcomponentsで作成する → ○

componentsでは配置や余白といったcssはつけないようにしてください。
理由としては、余白や配置のcssを付けることで特定の場所でしか使えなくなってしまう可能性があるためです。
例えば、トップページでは作成したコンポーネントと別コンポーネントの余白は100px空けたいが、別のページでは50pxしか空けたくないなどの場合にcomponentsに定義してるcssに余白や配置を入れることでコントロールが難しくなります。

また、コンポーネントから別コンポーネントのcssを上書きしたりするのもアウトです。
上書きしてしまうとコンポーネントを修正する際に一部だけ修正できていなかったなどの事態になり得ます。

projects

配下のprojectsでは、ページ単位で調整するcssを定義する場所になります。
こちらではコンポーネントとは別で、projectsからcomponentsを上書きしても大丈夫です。
ただ、projectsからprojectsはアウトです。

使い方としては、
会社情報ページがあった場合、
そのページ内での一番上のdivにクラス名をつけ、css側では該当クラス配下のpタグや、divタグ、または、コンポーネントのクラス名などを使って余白の調整や、配置などをしていくところになります。
基本はコンポーネントの余白、配置を調整する形になるかと思いますが、
そのページでしか使われないパーツなどがあれば、そのstyleなどはこちらに記述します。

ページ全体の余白感や、配置等はprojects配下の各ディレクトリにページ名をつけ、ページ名/index.scssで記述をしていきます。

そのページでしか使わないパーツなどはページにもよりますが、
同ディレクトリ内でセクションごとでcssファイルを切り、そちらで定義をしていきます。
セクション内のコンポーネントなどの余白は同ファイルでやりましょう。

utility

こちらは後述しますが、modifierなどで解決が難かったり、余白だけとか、display: noneだけというようなクラスを定義する場所になります。

クラスの命名について(自分流BEM)

命名についてはいくつか縛りを設けました。
リスト形式でざっと書いていきます。

接頭辞には該当のクラスの層の頭文字をつけます。
- 例: componentsの場合はc-, projectsの場合はp-,utilityの場合はu-...
単語繋ぎの命名はローワーキャメルケースを採用。
- 例: c-boxWrapper
componentsの命名はできるだけ汎用的に。
- componetsは汎用的でないと使いまわせないので、汎用的な名前にしたいです。
  - c-box → ○
  - c-aboutBox → ×
- 絶対にダメというわけではないですが、できるだけ汎用的な名前をつけるといいと思います。
- 大枠は一緒で見た目が少し違うのであればmodifierで対応しましょう。
- 基本となるパーツは一番よく使われるものにして、それ以外をmodifierにするといいと思います。
命名の基本は接頭辞-パーツ名__パーツ配下の要素名とすること
- 例: c-box__text
componentsのトップレベルのタグには必ず接頭辞-パーツ名にすること。
modifierのみを使わないこと
- .c-box.c-box--red → ○
- .c-box--red → ×
utility以外は略語を使わない
- 理由としてはその人独自の略語とかを使い出してしまった時に他の人がコードを読んだときにわかりづらくなるためです

例

.html

<div class="c-box">
  <p class="c-box__title">タイトル</p>
  <p class="c-box__text">テキスト</p>
</div>

// modifier(状態が違う場合)
<div class="c-box c-box--red">
  <p class="c-box__title">タイトル</p>
  <p class="c-box__text">テキスト</p>
</div>

// utilityを使うケース
<style>
.u-mT12 { // mTはmargin-topの略です
  margin-top: 12px !important;
}
</style>
.
.
.
<div class="c-box u-mT12">
  <p class="c-box__title">タイトル</p>
  <p class="c-box__text">テキスト</p>
</div>

<div class="c-box c-box--red">
  <p class="c-box__title">タイトル</p>
  <p class="c-box__text">テキスト</p>
</div>