SMACSSのメモ

命名規則 – SMACSS – Scalable and Modular Architecture for CSS

キーワード

  • SMACSS
  • OOCSS
  • BEM
  • Saas

Why

CSS is too fragile
以下の結果、レイアストが崩れていく

  • クラスの重複
  • 修正するべきスタイルが見つからない
  • !importantの乱用

SMACSS Architecture

SMACSS’s Categorizing CSS Rules

numerical order, Multiple use

  1. Base
  2. Layout
  3. Module
  4. Stage
  5. Theme

Base

デフォルトスタイル

  • Reset.css
  • Nomalize.css
  • font-size list
  • a :hover element

Layout

レイアウトの大枠用ルール

  • header
  • footer
  • nav
  • main contents
  • sidebar

Class name
.layout-xxxx
.l-xxxx

Module 基準単位

BEM – Block Element

Class name
.module
.module-title
.module-description
.module > h1

State 状態

Class name
.is-disable
.is-active
.is-current

Theme

Color

ref.
smacss.com 日本語の本もあり
[OOCSSの基本]https://app.codegrid.net/entry/oocss-1

KeyWord
余白、モジュールの分け方