コピペコードで快適生活

明日使えるソースを自分のために

CSSをあてる要素をどう分割するか

CSS

設計手法

責務をどのように分割するか、名前をつけるか という点でいくつかの代表的なアプローチがある。

  • OOCSS
  • BEM
  • SMACSS
  • FLOCSS

SMACSS

以下のように責務を分割する。

  • Base
    • ベースとなるデフォルトのスタイルを定義する
  • Layout
    • ページを構成するブロック要素のスタイルを定義する
    • プレフィックスとして layout- や l- が使われる。
  • Module
    • 再利用可能なスタイルを定義する
  • State
    • レイアウトやモジュールの状態を表すスタイル
    • 例 is-active, is-enable
  • Theme
    • 色、形状、レイアウト、書体などの見た目や振る舞いを表すスタイル
    • プレフィックスとして theme- が使われる。

https://murashun.jp/article/programming/css/css-design.html#chapter-5

FLOCSS(フロックス)

以下のように責務を分割する。

  • Foundation
    • スタイルの初期化を行う
    • 例: reset.css
  • Layout
    • ページを構成するブロック要素のスタイルを定義する
    • 例: header, main, sidebar, footerなど
  • Object
    • Component
      • 使い回せる要素を定義する。
      • 例: btn要素
    • Project
      • プロジェクト固有のスタイルを定義する。
      • (よくわからない)
    • Utility
      • Component,Project以外の色々
      • 例: clearfix, .mbs { margin-bottom: 10px; } など

要素名にはプレフィックスを付けることが推奨されている

Component - .c-*
Project - .p-*
Utility - .u-*

参考：https://github.com/hiloki/flocss

tips

子孫セレクタは少ない方が高速

CSSは右から左に読み込まれるため、子孫セレクタの多いこっちより

.wrapper .main .list .row

少ないこっちのほうが、探し出す要素の数が少ないため高速

.list-row

idやclassには要素名をつけないほうが高速

li.list より .li-listのほうが高速

責務で要素の名前をつける

スタイルの内容やコンテンツ名で名前をつけない

# 赤じゃなくなったら、class名を全部書き換える必要あり。
.coler-red

# 見積もり表以外でも使いたくなったとき、class名を全部書き換える必要あり。
.mitsumori-table

隙間をとるマージンについて

  • 上下の要素間の隙間を空ける時は、margin-bottom にだけ適用する
  • 左右の要素間の隙間を空ける時は、margin-right にだけ適用する

参考：https://qiita.com/tera_shin/items/af90aeba49f93c76bd9e