ネーミング規約
モジュール
注意:あなたのモジュールの名前は複数形でない限り、モジュールファイルは、単数形で名前を付ける必要があります。たとえば、次のように:
-
modules/_button.sass
-
modules/_grid.sass
-
modules/_form.sass
モジュールは、ベースモジュール、サブモジュール、修飾子、および状態に分解される。あなたのモジュールまたはサブモジュールの名前が二つの単語の場合は、キャメルケースを使用してください。例:.moduleName
サブモジュール
サブモジュールは別のモジュールにサブモジュールであることを示すためにハイフン-
区切り文字を使います。例:module-submodule
注意: 複数形のモジュール (例: ‘.tabs’) がある場合、この規約の例外としてサブモジュールの名前を ‘.tab'とすることができます 。.tab
は .tabs
のサブモジュールのであると想定できます。
修飾子
モジュールまたはサブモジュールの修飾子には--
を使ってください。例えば、次のように
-
.module--modifier
-
.module-submodule--modifier
注意:モジュールとサブモジュール修飾変数は同じ規則が含まれています。たとえば、次のように
$module--modifier-background: #000
状態
状態を表すにはis-state
, is-module-state
, is-module-submodule-state
パターンを使用してください。例えば、次のように
-
.is-active
-
.is-sidebar-toggled
-
.is-nav-item-active
コンテクスト
モジュールまたはサブモジュールで特定のスタイルを持つコンテキストを追加するためにhas-
を使用してください。例えば、次のように:
1
2
.has-dropdown
position: relative
注意:このアイデアはsuitcssから借用されています。
注意:これは、Modifierとは異なり、ベース·モジュールのカスタム、代替スタイルを設定します。
Sass変数
Core - Settingsに記載されているように、変数は、モジュールと同じ命名規則に従う必要があります。 ほとんどのグローバル変数(複数箇所、複数のコンテキストで使用される)は、$base-
で始まります。いくつかの例を見てみましょう。
$base-background: #eee
$base-color: #444
$base-borderRadius: 3px
$base-fontSize: 16px
$base-lineHeight: 1.6
$base-whitespace: 20px
コンテンツとレイアウトの変数は、それぞれ、$c-
と $l-
で始まります。
$c-header-color: #999
$c-header-fontFamily: sans-serif
$l-maxWidth: 960px
$l-sidebar-width: 200px
モジュール固有の変数を作成したい場合は:
$grid-breakpoint-lap: 480px
$grid-breakpoint-desk: 800px
$grid-gutter: 20px
$form-fontSize: 12px
$form-input-background: #ddd
階層構造
.block--left
まはた.block--right
は** 使用しないでください **。- 階層構造に意味を持たせるために、
.block--a
と.block--b
を** 使います **。
画像
画像に名前を付けるセクションがありますか? わかりました。目を通してみましょう。
-
bg-*
背景用 -
icn-*
アイコン用 - -
logo-*
ロゴのための - -
img-*
一般的なイメージのために - より大きなグループのためのサブフォルダ