CSS設計のための覚え書き

CSS設計のための覚え書き

■CSS設計指針 v1.0(草案)

◆設計概念
– コーディングを行う際に守るべき約束事。
– コーディング中に迷いが生じたらこれを基に判断・解決する。
– HTMLとコンテントのセマンティックな価値を向上させる
「SMACSS:Scalable and Modular Architecture for CSS」より抜粋

◆設計原則(OOCSSによる)
1. 文書構造と装飾(視覚要素)の分離
2. コンテナとコンテンツの分離
3. HTMLとCSSの分離

◆ガイドライン
1.ID名、クラス名の命名、挿入位置に悩まないようなルールを定める
2.メンテナンス、画面の回収・追加のためにCSSファイルを増やさない
3.設計時にCSSファイル数は最小限にする
4.CSSによる汚染を防ぐための手立てを設計時に予め打っておく
5.特定のHTML構造に依存したセレクタを避ける
6.設計はオリジナルをなるべく避け、汎用的なものにすること(既成の手法を取り入れつつ厳しすぎないルールいする)
7.画面やウェブサイト固有の呼称による命名は避ける

◆命名規則について
1.クラス名の重複によるスタイルの競合と汚染のリスクを減らす
2.クラス名を見てどのコンポーネントのか分かる
3.セレクタの詳細度を減らせる

◆より詳細なガイドラインのために
– 不要な子孫セレクタを減らす
– タグ+ID、クラスセレクタを無くす
– 不要な!importantを低減させる
– プロパティの順番を揃える
– カテゴリに分類する
– クラスセレクタの命名は再利用しやすいに名称にする
– 繰り返すルールセットをモジュールにする

■CSSコーディング仕様のためのルール

◆カテゴライズ(SMACSSのルール)
%LAYOUT
Layoutに属するのは、IDをふるようなヘッダー、フッタ、コンテンツエリア、サイドバーなどの画面構造の大枠の要素、かつ基本的には画面に1つしか存在しないセクションなどがここに属する。
言い換えればIDセレクタは詳細度を高めるので、詳細度の高いものが属する。
ただし「場所に依存するセレクタ」にならないように、スタイリングには気をつけること。
★命名規則:HTML上でLAYPUTカテゴリーに属することを明示するためアタマに接頭辞“l-”を付ける。

%MODULE
LAYOUTに属さない画面の構成要素。ボタン、見出し、リンク、アラートメッセージなど。
★命名規則:LAYOUTとSTATEと区別するため接頭辞はつけない

%STATE
JSなどの制御によって切り替わるを表すルールがこのカテゴリーの属する。
要素を一時的に隠すdisplay:noneを適用させるための“is-hidden”というようなクラスや“is-error”というようなものなど。

★命名規則:HTML上でLAYPUTカテゴリーに属することを明示するためアタマに接頭辞“is-”を付ける。

ボタンやタブなどのMODULEのコンポーネントにおけるSTATEパターンが必要なときは、命名に対象のコンポーネントの名前を含め、またそのコンポーネントルール側(つまり%MODULE)に記述すること推奨する。
例:“is-tab-active”のように“is–<状態>”とする。

またここでは!importantを使うことを許可する。
必然的にそのスタイルへ変更させることが目的のため。

その他、メディアクエリなども分類的にはここに含まれるがメンテナンス性を考えると%MODULEに置く方がよい。

%THEME
ビジュアルデザインテーマの切り替えをする機能が求められるCSSの場合に用いるカテゴリ。
STATEのような小さい単位の状況変化や条件付与とは異なる、広い範囲での“スタイル変更”が必要な場合。

★命名規則:HTML上でTHEMEカテゴリーに属することを明示するためアタマに接頭辞“theme-”を付ける。

BEMの命名規則
パターンの大きな枠組みがBlock、その中のパーツがElement、パーツでも特別な場合(JSでの制御、)
Block__Element
Block–Modifier
————————————-

◆◆SMACSS、BEM、MCSSのいいとこ取りでわかりやすく統合させた管理法◆◆

◆◆1/2現在、最終的に行き着いたCSS管理法◆◆

【0】(Reset層)ノーマライズとスタイルリセットのための層
foundation.css(normalize.cssなどインクルードする)
カテゴリ:%Base(Reset、Style)
– – – – – – –
使用セレクタ:HTML5タグのみ
– – – – – – –

【1】(Base層)基本レイアウトを表示させるための層
ファイル名:base.css
使用カテゴリ:%Layout、%Module
– – – – – – –
使用セレクタ:HTML5タグ、ID、classについて
Layoutは接頭辞“l-”、Moduleは“m-”
接頭辞+Block名__Element名
接頭辞+Block名–Modifier名
文節が2つ以上の名称の場合はキャラメルボックス
– – – – – – –

【2】(Project層)jqueryなど固有の動作や表示をさせるための層
ファイル名:固有のファイル名
使用カテゴリ:ファイル名はそれぞれのProjectに準じる
(調整しない)

【3】(Style層)視覚効果を正確に表示させるための層
ファイル名:cosmetic.css
使用カテゴリ:%State、%Theme
– – – – – – –
使用セレクタ:HTML5タグ、ID、classについて
Stateは接頭辞“s-”、Themeは“t-”
接頭辞+Block名__Element名
接頭辞+Block名–Modifier名
文節が2つ以上の名称の場合はキャラメルボックス
ビジュアルデザインパターンのレイアウトはpt連番とする
– – – – – – –

Facebooktwittergoogle_plus

なるほど!と思ったら、すぐシェア♪

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

東京Webデザイナーズ交流会/10月のテーマ

WordPressで有料課金型会員制サイトを構築する方法

検索してもなかなか情報のない「会員制サイトを構築法」を解説します。