命名規則
共通
HTML
img
- 固有のClass名がある場合は同じファイル名でも良いです。
[要素]_[属性][連番]
bg_top.png
icon_arrow1.png
CSS
記述方法
- 接頭辞 + BEM記法、マルチクラス
[接頭辞]-[塊]__[要素]--[属性]- フォルダの先頭の文字を接頭辞として使用します。「assets/sass/以下」
- パーツのメンテナンス性を重視して重複するパーツを作成しても構いません。
- コンポーネント単位のclass名毎にscssファイルを作成してください。
<div class="c-unit">
<div class="c-unit__head">
<h2 class-"c-unit__title">タイトル</h2>
</div>
<div class="c-unit__body">
<ul class="e-list e-list--disc">
<li>テキスト</li>
<li>テキスト</li>
</ul>
</div>
</div>
コメント
- コメントは読み安やを考え自由に入れて大丈夫です。
- 例えば文脈にそった見出しなど記述してください。
- 例えば複雑なコードはなるべくコメントを残してください。
例）
==========================================================================
#FIME NAME
==========================================================================
見だし1
==========================================================================
見だし2
------------------------------------------------------------
空白
- 空白は読み安やを考え自由に入れて大丈夫です。
- 例えば関連しないブロック間は3つ以上の改行
- 例えばセレクタとプロパティの間は改行
例）
.hoge {
margin-top: 10px;
padding-top: 10px;
display: inline-block;
&:before,
&:after {
border-bottom: 0;
}
}
.fuga {
display: block;
}
.fuga--type1 {
display: inline-block;
}
.fuga--type2 {
display: table;
}
scssディレクトリ構造
デフォルトのディレクトリ構造は次のようになります。
sass
├── bundle
│ ├── @core
│ ├── @mixins
│ ├── @utilities
│ ├── @variables
│ ├── components
│ ├── elements
│ ├── library
│ ├── layouts
│ └── all.scss
│
├── pages
└── bundle.scss
css
└── bundle.css
JS
jsの分類や作業の判断
- 必要そうなJSパーツはあらかじめ準備しています。js - componentsを参考にしてください。
- HTMLのclassに当てる場合は「js-●●●」など装飾のclassと区別してください。
source/assets/src/bundle/以下に配置したJSファイルはバンドルしたパターンとバンドルしないパターンが書き出されます。- ページ固有のjsは別ファイルを作成してもよいです。
jsディレクトリ構造
デフォルトのディレクトリ構造は次のようになります。
js
└── bundle.js
src
├── bundle
│ ├── accordion
│ ├── allcheck
│ └── ...
│
└── bundle.js
使い方・分類
Layoutとは
- ページの基本レイアウト
- レイアウトの基本の型は次の並びになります。
.l-main > .l-container > .l-block > .l-unit
- 外枠に
.visual-editorを指定することで、内包するタグに「Elements」の主要なベース装飾を指定可能です。
主にCMSのヴィジュアルエディタ等で使用するイメージな気がしています。
なので.visual-editor内はh3,h4,pなど基本的なタグので構成される想定です。詳しくは「VisualEditor」を確認ください。
Componentsとは
- 中規模の部品
- 主に一覧ページを構成する部品のような気がしています。
- ベースのmargin-bottomとして
.is-mb-smallが設定されています。
- 要素間の間隔を制御する場合の汎用マージンボトムで調整します。
.is-mb0、.is-mb-xs、.is-mb-small、.is-mb-medium、.is-mb-large
Elementsとは
- 小規模の部品
- 主に詳細ページを構成する部品のような気がしています。
- ベースのmargin-bottomとして
.is-mb-smallが設定されています。
- 要素間の間隔を制御する場合の汎用マージンボトムで調整します。
.is-mb0、.is-mb-xs、.is-mb-small、.is-mb-medium、.is-mb-large
Utilityとは
- ツール、状態管理など
- 汎用ツールです。ここぞと言うときに力を発揮してくれる頼もしい味方です。