Zenn
🍱

CSSのレイアウト定義案：Container・Boxで定義し、Element・Componentでの定義は避ける

2021/05/12に公開
CSS
設計
tech

入れ物（Container・Box）と内容物（Element、Component）の定義指針を定める

  • 配置に関する定義は、要素を格納する入れ物（Container・Box）で定義し、個別の要素(Element、Component）ではできるだけ行わない。
  • 要素は、装飾・形状・サイズに関するものの定義に留める。
  • 特に、広域的に要素を利用する場合は、広域的な定義においては配置に関する定義は行わない。
  • 要素はいろいろな場所で使われるため、位置を定義すると打ち消しなどの無駄な定義をいれることになる。
  • marginをつけるときも、汎用的な定義部分ではなく、個別ページのスタイル内で行う。
index.html

<header>
<img src="logo.png"/>
<button type="button">ログイン</button>
</header>
_header.scss

.g-header {
  display: flex;
  justify-content: space-around;
}
_nav-menu.scss

@use "config" as c;

.g-button {
  background-color: red;
  color: map-get(c.$color-set, "button-char-white");
}

備考(BEMの良さと疑問）

  • BEMの設計の良さは、ただグルーバルやカスケードによる定義の衝突や打ち消し、予期しない影響を抑えることにとどまらず、親と子、入れ物と要素を意識するところにもあると思う。

  • CSSの定義において、BEMの親子・入れ物と要素という視点はとても重要だと思います。

  • BEMの命名方法については、冗長すぎるため疑義があります。（グローバルprefix、小さい階層、直下セレクタを組みあわせることで冗長なセレクタにする必要はないと思います。）
    BEMの命名法への疑義については、以下の記事でも指摘されています。

  • 参考：BEM Is Terrible

Discussion