YASSは、FESSにSMACSS、BEMのコンセプトを取り入れたCSSの基本定義集です。
Sass >=3.4.を使用します。 Updateまたはinstallを行ってください。
$ gem update sass
$ gem install sass
npmを使用してNode.jsのモジュールをインストールします。
$ npm install
gulpを使用します。
$ gulp
SMACSSのカテゴリー分類を拝借し次の5つのカテゴリーで構成されます。
- Base - reset/normalize/base...
- Layout
- Structure - header/main/sideber/footer...
- Grid - grid...
- Module
- Component - heading/button/link/...
- Utility - clearfix/display/margin...
- Theme - theme...
- State
Reset.cssやNormalize.cssなどを用いたブラウザのデフォルトスタイルの初期化や、プロジェクトにおける基本的なスタイルを定義します。 ページの下地としての全体の背景や、基本的なタイポグラフィなどが該当します。 Baseの中にクラスを指定したスタイルを定義してはいけません。
ページを構成するヘッダーやメインのコンテンツエリア、サイドバーやフッターといったプロジェクト共通のコンテナーブロックのスタイルを定義します。
プロジェクトにおける繰り返されるビジュアルパターンをすべてModuleと定義します。
YASSでのモジュールは、さらに次のレイヤーに分けられます。
再利用できるパターンとして、小さな単位のモジュールを定義します。
わずかなスタイルの調整のための便利クラスなどを定義します。
clearfixテクニックのためのルールセットが定義されているヘルパークラスも、このレイヤーに含めます。
Themeはサイトの表面的なデザイン変更を行います。
また単一の装飾のスタイルなどもテーマとして定義します。
Stateは、モジュールやレイアウトを拡張し、特定の状態によってスタイルを上書きします。
状態の切り替えはJavaScriptで制御するため、状態ルールはJavaScriptに依存すると言えるでしょう。
BEMシステムのシンタックスである、Block、Element、Modifierに分類して構成される規則を採用します。
YASSでは、オリジナルのBEMのシンタックスではなく、MindBEMding のアイデアを基本的にそのまま取り入れています。
.block {}
.block__element {}
.block--modifier {}
JavaScriptで操作されるような「状態」を表すようなModifierについては、SMACSSのStateパターンの命名を拝借し、'is-*'プレフィックスを付与し、.is-active
というようにすることもできます。
<button class="c-button is-active">Save</button>
.c-button { ... }
.c-button.is-active { ... }
このアイデアを採用する場合の原則として、.is-active
そのものにルールを持たせるのは禁止します。これは.is-active
そのものが持つルールが、
他のモジュールのModifierのスタイルを汚染してしまうのを防ぐためです。
役割を明確にするためにプレフィックスをつけることを推奨します。
- Layout -
.l-*
- Component -
.c-*
- Utility -
.u-*
- Theme -
.t-*
- State -
.is-*
yass
├── _variables.scss
├── _mixins.scss
├── mixins
│ ├── _opacity.scss
│ ├── _mediaqueries.scss
│ └── ...
├── base
│ ├── _normalize.scss
│ ├── _base.scss
│ └── ...
├── layout
│ ├── structure
│ │ ├── _header.scss
│ │ ├── _footer.scss
│ │ ├── _main.scss
│ │ ├── _sidebar.scss
│ │ └── ...
│ └── grid
│ └── _grid.scss
├─── module
│ ├── component
│ │ ├── _button.scss
│ │ ├── _dialog.scss
│ │ ├── _grid.scss
│ │ ├── _media.scss
│ │ └── ...
│ └── utility
│ ├── _align.scss
│ ├── _clearfix.scss
│ ├── _margin.scss
│ ├── _position.scss
│ ├── _size.scss
│ ├── _text.scss
│ └── ...
└── theme
├── _color.scss
└── ...
プロジェクトで使用する基本的な変数が定義されているファイル。
各mixinファイルをincludeしたファイル。
各mixinファイルが格納されるディレクトリ
上記を参考
モジュール単位でファイルを分割することによって、ページ単位またはプロジェクト単位でのモジュールの追加・削除の管理が容易になります。
これらを統括するためのstyle.scss
のようなファイルからは次のように参照します。
// ==========================================================================
// variables mixin
// ==========================================================================
@import "yass/_variables";
@import "yass/_mixins";
// ==========================================================================
// base
// ==========================================================================
@import "yass/base/_normalize";
@import "yass/base/_base";
// ==========================================================================
// Layout
// ==========================================================================
// -----------------------------------------------------------------
// Structure
// -----------------------------------------------------------------
@import "yass/layout/structure/_header";
@import "yass/layout/structure/_footer";
@import "yass/layout/structure/_main";
@import "yass/layout/structure/_sidebar";
// -----------------------------------------------------------------
// Grid
// -----------------------------------------------------------------
@import "yass/layout/grid/_grid";
// ==========================================================================
// Module
// ==========================================================================
// -----------------------------------------------------------------
// Component
// -----------------------------------------------------------------
@import "yass/module/component/_button";
@import "yass/module/component/_dialog";
@import "yass/module/component/_media";
// -----------------------------------------------------------------
// Utility
// -----------------------------------------------------------------
@import "yass/module/utility/_align";
@import "yass/module/utility/_clearfix";
@import "yass/module/utility/_margin";
@import "yass/module/utility/_position";
@import "yass/module/utility/_size";
// ==========================================================================
// Theme
// ==========================================================================
@import "yass/theme/_theme";
Sassのplaceholder selectorを利用(@extend)したシングルクラス設計が基本になっています。
次のようなbuttonモジュールがあったとします。
.c−button {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
}
.c-button--primary {
background-color: #CCAA00;
}
<a href="#save" class="c-button c-button--primary">Button</a>
YASSの構想では、このようなマルチクラスパターンを基本使用*せずに、次のようなextendによるシングルクラスパターンで設計していきます。
*マルチクラスパターンを用いた方が柔軟な設計が可能な場合などは使用してもよい。
%def-button {
display: inline-block;
padding: 0.5em 1em;
cursor: pointer;
}
.c-button {
@extend %def-button
background-color: #CCAA00;
}
.c-button--primary {
@extend %button
background-color: #FFCC00;
}
// Compiled
// .c-button,.c-button-primary {
// display: inline-block;
// padding: 0.5em 1em;
// cursor: pointer;
// }
// .c-button {
// background-color: #CCAA00;
// }
// .c-button--primary {
// background-color: #FFCC00;
// }
同じplaceholder selectorを継承しているクラスは基本そのクラスのModifierとして定義する。
<a href="#save" class="c-button">Button</a>
<a href="#save" class="c-button-primary">Button</a>
placeholder selectorによる@extendは、原則そのモジュールで完結する継承以外では利用を禁止します。
カテゴリーやレイヤー超えてextendによる継承をおこなった場合、YASSの構成・設計は破綻し、カスケーディングルールも複雑にしてしまう可能性があるためです。
以下は例外として、許容されるパターンをあげます。
<a href="#" class="c-btn">ボタン</a>
<h2 class="c-heding2">見出し</h2>
%t-gradient-gray {
background-image: linear-gradient(top, #F2F2F2, #C9C9C9);
}
.c-btn {
@extend %t-gradient-gray
}
.c-heding2 {
@extend %t-gradient-gray
}
原則として、モジュール間のカスケーディング、他のモジュールを親とするセレクタを用いたカスケーディングは禁止とします。
// Component
.c-button {
...
}
.c-media .c-button {
...
}
// Layout
.l-main {
...
}
.l-main .c-button {
...
}
なぜならば、そのレイヤーにおいて、特定のモジュールに依存することなく、モジュールとして独立して再利用できるべきであり、混在させることによって他の開発者が予想しない挙動になるべきではないためです。
例外として、Themeカテゴリーにおけるカスケーディング、例えば、次のようなテーマがレイアウトやComponentのモジュールを変更することは許容します。
// Layout
#l-header {
width: 100%;
}
.t-layout-fixed #l-header {
width: 1200px;
}