This is my css architecture idea. This is frequently updated.
- Base
- Module
- Unit
- layout
- pack
- Asset
- utility
- assist
SMACSSのBaseにあたるものです。
ページを構成するパーツのすべてです。 再利用しやすいよう、親に依存せず、Module単独でスタイルを維持できるように設計します。 Moduleは自分自身の見た目のみを司り、位置関係に関しては、後述するUnitクラスがすべて受け持つようになります。
- ModuleName
- ModuleName--skinName_[n]
- ModuleName-descendentName_[n]
moduleはskeletonとskinに分けて記述します。
ModuleName
がスケルトンになり、そのModuleに形作るための必要最低限のスタイルを司り、
ModuleName--skinName
が、そのModuleのskin(modifier)のスタイル司っています。
また、Moduleを作るモジュール群に関しては、ModuleName-descendentName
で記述します。
Moduleの子要素にはすべてクラス名でスタイル当てていきます。(構造とスタイルの分離のため) 親Moduleによって、子Moduleの形が変わる場合には親Moduleと同じskinNameを付与し対応します。
例を示します。
<div class="Island Island--notify">
<div class="Island-head">
<h3 class="Heading Heading--h3"></h3>
</div>
<div class="Island-body">
<ul class="LinkList LinkList--notify">
<li class="LinkList-item"></li>
</ul>
</div>
</div>
セマンティックに名前を付けられない場合、またはパターンがあるものに関しては、Module名(または、skinName,descendentName)の最後に_[value]
を追加し対応します。
<a href="#" class="TextLink TextLink_1"></a>
Componentにはページで一つだけしか使えないLayoutクラスと、汎用的に使えるPackクラスが存在します。
先述したように、 moduleは、そのmoduleがどのような見た目をしているかだけを司り、 そして、その親のComponentが、そのmodule(またはmodule群)が、どのような位置関係にあるかを司ります。
これによって、moduleがどの位置にあるかについては全く関与しないで、自分自身の見た目だけを司ることができます。
ページに唯一のComponentとしてはプリフィックスとしてl-をつけます(Layout) LayoutはSMACSSでいうThemeの役割も担っており、ページごとにオリジナルなmoduleにしたい場合のフックに利用します。
.l-header {}
.l-sidebarRight {}
.l-specialPage {}
汎用的に使えるComponentとしてプリフィックスとしてp-をつけます(Pack)
.p-container {}
.p-streamCard {}
Assetはグローバルに使えるUtilityクラスと、コンポーネントを補助するAssistクラスが存在します。
marginやpadding、そしてclearfixなどグローバルに使える、単一のスタイルが付与されたクラスがここに分類されます。
プリフィックスとしてu-
をつけます。
スタイルには明示的に!important
を付与します。
.u-mb10 {}
.u-clearFix {}
Assistクラスは必ずコンComponentとセットで利用します。 必ずCSSはComponentとの結合セレクタで定義します。
.has-border {}
.has-header {}
タブがアクティブ、非アクティブやモーダルが、表示、非表示などコンポーネントの状態を示すときはis-
を使います
.is-hidden {}
.is-error {}
.is-active {}
.Tab-button.is-active {}
ボーダーがある場合、ない場合やアイコンをある場合、ない場合などコンポーネントのパーツを拡張したり、修飾する場合はhas-
を使います
.has-border {}
.has-header {}
.has-icon {}
.Panel.has-header {}
skinとほぼ同じ役割のように見えますが、クラス属性が冗長になるのを防ぐために、モジュールの追加(パネルのヘッダ)やグローバルなモジュール(枠線など)の場合はhas-
を使います。
<div class="Panel Panel--primary has-header"></div>