運用できるCSS設計を考える

会社のcssがレガシーでずっと書いていたり、継ぎ足し継ぎ足しだったりしたので、sassやcss設計を取り入れて、ソースの共有と補完を少し改善した。
今回は、その時に考えたcss設計を記録として残しておきます。

BEMを基準に設計した

いろんなcss設計がありますが、個人的にBEMの .foo__bar が見やすいので、BEMベースで設計しました。
イメージとしては以下のような感じ。

それでは少し解説していきましょう。

親セクションから子セクションの振り分けについて

#headerなど、サイトでざっくりとセクションがわかれる場合ありますよね。
#nav #main #section_01~... #aside #footer など想像できると思います。
この場合のスタイルは基本background-colorのみにします。
また命名の方法は、そのセクションがサイトのどこを表しているか明確に記述する必要があります。
大セクションの次に大体来るのが、div.containerになります（最近はそうとも言いがたい時ありますが）。
このクラスは基本要素の中央寄せしかしません。
それ以外のプロパティを使用するのは不可としました。

次に、.foo-boxの次の要素が.foo__left .foo__rightに分かれていますね。この.foo__left .foo__rightはそのセクションの要素の左と右を表すだけでのプロパティにします。

小セクションからの設計

.foo__left .foo__rightに振り分けた後は、.foo__left__bar .foo__right__hogeなどと名前を継承になるかと思いますが、

しません

この場合は、セクションを上下左右に振り分けた直後の、セクションは、大セクション__子セクションとします。
ですので、例のソースは.foo__bar-boxや.foo__hoge-boxになっていると思います。さらに、子のセクションでいくつかのセクションに別れる場合、大セクション__子セクション__孫セクションとします。

また、各セクションをどんどん振り分けていった先、一番下層にくるセクションがこれ以上分離できないという場合は、直接そのセクションに float のプロパティを記述しても良いということにしました。
これは最後まで振り分けの規則に従っていると、text とimg の振り分けに left や right の div がネストする可能性があるので、逆に見難くなるということが運用中に起きたからです。

各セクションのスタイルについて

各セクションのスタイルは、.foo .foo__barで定義づけていますが、そのclassやidにcssプロパティを全て記述してしまうと、非常に修正が難しくなり、cssも読みづらくなりますね。
そこで、各セクションのプロパティの機能をハイフンを使って分離することで、そのセクション内でのスタイルを細分化します。

※ アンダーバー2本はサイトのセクションどうしの関係を表し、ハイフンはそのセクションに対するcssのプロパティとセクションのパーツに当たる対応と考えます。

大体ハイフンの先に使う（使っていた）接尾辞は以下になります。
● .foo-box ：そのセクションの入れ物としてのプロパティを記述
● .foo-head ：そのセクションの見出しだったりする要素に対するプロパティ
● .foo-txt ：そのセクションの文章などを記述しているタグに対するプロパティ
● .foo-link ：に対するプロパティ
● .foo-img ：に対するプロパティ
● .foo-modify ：上記以外で、装飾だったりのプロパティが必要な場合に使う

などです。
それぞれの役割をざっと書いておきます。

css

.foo-box { /* 入れ物の機能なので、文字に関する記述はしない */
  float: left; /* 上述で、最小となるセクションに到達したばあい、-boxに直接書き込む */
  width: 200px;
  height: 100px;
  padding: 4px 14px 6px 4px;
  margin: 14px;
  background-color: $base;
  text-align: center; /* imgを中央寄せになどにする場合のみ使う */
}

.foo-head { /* 見出しに相当するプロパティか記述 */
  font-size: large;
  font-weight: bold;
  color: $red;
}

.foo-txt { /* 文字に関するプロパティ以外の記述は一切しない */
  font-size: 16px;
  line-height: 1.5em;
  color: $black;
  margin: 4px;
}

/*
<a href="hoge"></a>はもともとインライン要素ですが、スタイルによってはブロック要素にする必要があるので、
プロパティの制限は原則しない。
ただし、プロパティが嵩張る場合、<span>などをネストさせて対応する必要がある。
*/
.foo-link {
  display: block;
  color: $blue;
}

/*
レイアウトによっては、使用しない場合もあるけど、
これは例として中央寄せする場合を書いてます。
*/
.foo-img {
  display: block;
  width: 80%;
  margin: 0 auto;
}

.foo-modify {
  /* 任意でお好きにどうぞ */
}

設計にベストはない

マークアップや、cssの記述の見通しを良くすることは確かに大事ですが、なかなか弊害も多いので、上手いところで落とし所を見つけるのも必要ですね。

もっと精進していきたい今日この頃。