LoginSignup
1
2

More than 5 years have passed since last update.

@akuden

css guideline note

Last updated at Posted at 2017-12-10

css guideline note

Atomic Designのカテゴリをコンポーネント分類としてcssルールに落とし込めないか考えてみたのですが、逆に煩雑になって運用が難しそうなものになってしまったのでお蔵入りとしました。
未完成ですが、いちおう今後の参考のためにメモとして残しておきます。

お蔵入りの理由としては…
コンポーネント粒度種が多くて管理が煩雑になりそう。また人によって分類の解釈に差が生まれそう。
粒度の大きいtemplatesとpagesの使い分けが難しく活用し辛い(moduleに分類せずにSMACSSのlayout相当にカテゴリを変えた方が良いかも？)。
Atomic Designの概念は素のcssコンポーネントとしてよりもsassのmixinなどで取り入れた方が相性が良さそう。

introduction

コンセプトは SMACCS + Atomic Design + OOCSS
なるべくシンプルなルールとしたいため、上記3つをベースにしながらもBEMやFLOCSSその他の命名規則のほか、bootstorap等のCSSフレームワークも参考にルールを策定してみます。
仮称「SAOcss」。(なんてどうだろう)

category

  • base
    • reset
    • initialize
  • module
    • atoms
    • molecules
    • organisms
    • templates
    • pages
  • utilities
    • layout
    • helper
  • support
    • skin(modifier)
    • state
    • effect
  • extra
    • header
    • footer
    • sidebar
  • responsive
  • js

base

タグに直接定義するサイト全体の基本スタイル。

reset

ブラウザデフォルトスタイルの差異を埋めるリセット。
reset.css、normalize.css 等のベンダーcssの利用または独自のスタイルを定義。

initialize

プロジェクト独自の初期化スタイル。
resetで不足している基本スタイルを定義。

module

主に再利用可能なコンポーネントモジュールを定義。
componentは粒度を持ち、内包する下位レベル要素のレイアウト定義、デザイン、その他プロパティを変更・定義できる。

atoms(lv1) < molecules(lv2) < organisms(lv3) < templates(lv4) < pages(lv5)

原則として各component自身は幅やマージンなどレイアウト情報を持たず、それらは上位レベルcomponentの子孫要素として定義する。
アイコンや画像等の完結したデザイン情報を持つものを除き、ボタンなどのブロックパーツは幅を持たせずliquidなものとする。
但し、utilitiesクラスを使用して幅やマージ等を持たせることは許容。
内包する同レベルのレイアウト定義、プロパティ変更は不可。

module子孫要素の命名は .prefix-module-element とする。
listやtable等子孫関係が明確な構造体には 子孫セレクタで直接タグに定義することを許容する。

atoms

原子…一要素（1つのタグ）
icon,button,input,badge,text link, ... etc.

.a-classname { ... }

molecules

分子…atoms（又はタグ）2つ以上の組み合わせからなる小部品。
input group,list,table,media,panel ... etc.

.m-classname

organisms

有機体… atomsやmolecules、その他の複数の組み合わせによってできた一つの機能的なブロック。
header,footer,sidebar,widget,panels, ... etc.

.o-classname { ... }

templates

ページ単位のスタイル。
主に内包するmoduleのレイアウトを定義。
moduleをテンプレート固有のデザインに上書き可。

.t-classname .a-classname { ... }

pages

一意のページ固有のスタイルを定義。
主に内包するmoduleのレイアウトを定義。
moduleをページ固有のデザインに上書き可。

.p-pagename .a-classname { ... }

utilities

レイアウトやデザインを調整するためのユーティリティclass。

layout

汎用レイアウトブロックやグリッドシステムを定義。

.l-section { ... }
.l-grid { ... }

helper

marginやpaddingその他、汎用ヘルパークラスを定義。

.h-mt0 { ... }

classは emmet abbreviation をベースに命名。
上書きのため原則 !important を使用。

support

他のクラスと連結してバリエーションを定義するサポートクラス。
このクラス単体にプロパティ定義することは禁止。

skin(modifier)

moduleの色違いやサイズ違いなどに使用する。
class名はハイフン始まり .- とする。

.a-classname.-sm { ... }

skin class例
.-default
.-primary
.-secondary
.-lg
.-sm
.-red
.-odd
.-even
.-alternate

state

jsで動的操作するスタイルを定義。
プレフィックス .is- を付ける

.classname.is-state { ... }

主なstate class

.is-active
.is-disable
.is-checked
.is-current
.is-show
.is-hidden
.is-opened
.is-closed
.is-odd
.is-even

efect

追加アニメーション効果用class

extra(option)

ページ内で再利用しない、バリエーションを持たないmolecules同程度の粒度を持つブロックモジュール。
ヘッダー・フッター・サイドバー等、プロジェクト共通のレイアウトブロックを定義。
(メンテナンス頻度が低く固定的なヘッダー等はmoduleから分離した方がいいのでは？と考えカテゴリを作りましたが必要性が薄いようにも思うのでオプションとしました)

responsive

suffixを使用。

  • Small device ... smart phone .classname-sp
  • Medium device ... Tablet .classname-tb
  • Large device ... pc .classname-pc

js

JavaScriptで操作するための要素指定に使用するセレクタclass。

.js-classname

このクラスにスタイルを定義することは禁止。
また、デザイン定義されている(.js-以外の)classをjsに使用することも禁止。
※デザインと機能は分離する。動的にデザインを変更する場合はstate(.is-)クラスを使用する。なるべくjsでのclassセレクタ利用は避け、id、data属性(jQuery/Sizzle を使用してる場合)を推奨。

naming conventions

.prefix-block-element.-skin.is-state

reference

CSS(design) Architecture

components

other

以上、ありがとうございました。

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
2