CSSガイドライン
CSSファイルの読み込み
CSSファイル数
読み込む外部CSSファイルの数は原則として1画面につき1ファイル（all）、または2ファイル（共通ファイルと画面固有ファイル）程度に抑える。
読み込み位置
head要素の末尾よりに、link要素により読み込む。
<head>
〜（中略）〜
<link rel="stylesheet" href="all.css">
</head>
<head>
〜（中略）〜
<link rel="stylesheet" href="common.css">
<link rel="stylesheet" href="unique.css">
</head>
リポジトリ1つに対してCSSをなるべく1ファイル（all.css）にまとめる。
モジュール構成
CSSモジュールのカテゴライズはSMACSSに準じる。
「sample.css」を出力する例
ディレクトリ構成とSCSSモジュールファイルの構成の例は以下のとおりである。
/sample
┗ _import.scss
┗ /base
┗ _import.scss
┗ variable.scss
┗ reset.scss
┗ /layout
┗ _import.scss
┗ header.scss
┗ navi.scss
・
・
・
┗ /module
┗ _import.scss
┗ article.scss
┗ detail.scss
・
・
・
┗ /state
┗ _import.scss
┗ state.scss
┗ /styleguide
┗ _import.scss
┗ styleguide.scss
_import.scssモジュールの内容例
「/sample/_import.scss」
@charset "UTF-8";
@import "./base/_import.scss";
@import "./layout/_import.scss";
@import "./module/_import.scss";
@import "./state/state.scss";
@import "./styleguide/_import.scss";
「/sample/base/_import.scss」
@charset "UTF-8";
@import "./_variable.scss";
@import "./_reset.scss";
セレクター
セレクターの種類
CSSセレクターは原則としてclassセレクターのみを採用する。
※ サービス運用において複数種類の詳細度（Specification）の採用はCSSの破綻を招く
セレクターの命名方針
セレクターの命名は、意味内容が一般的に理解できる範囲でできるだけ短く省略する。
// 意味は通じるが長い
.comment-box__text--default
// 短いが意味が誤解されるかもしれない
.cm-bx__txt--df
// 誤解されない範囲で省略できている
.cmnt-box__txt--def
layoutモジュールのclassセレクター命名
layout モジュールにレイアウトを設定するセレクター名には接頭辞「l-」を与える。
以下の「l-navi」classは layoutモジュール向けセレクター
<nav class="l-navi navi--head">
限定的な要素セレクターの許容
推奨するclassセレクターの利用ではHTMLソースコードが冗長になりすぎる場合がある。
冗長な例
<section class="l-list list--person">
<p class="list__photo"><img class="list__img"></p>
<ul class="list__wrapper">
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
</section>
<section class="l-list list--shop-item">
<p class="list__photo"><img class="list__img"></p>
<ul class="list__wrapper">
<li class="list__item"></li>
<li class="list__item"></li>
</ul>
</section>
.media--person {
.list__img {}
.list__wrapper {}
.list__item {}
}
.media--shop-item {
.list__img {}
.list__wrapper {}
.list__item {}
}
モジュール内容の最小単位のため詳細度の影響を無視できると判断した場合は、要素セレクターを利用してソースコードの簡略化を図る。
ただしこの場合でも、チャイルドセレクター（Child selectors）「>」によりセレクターの影響範囲は限定しておくことが望ましい。
簡略化した例
<section class="l-list list--person">
<p class="list__photo"><img></p>
<ul>
<li></li>
<li></li>
</ul>
</section>
<section class="l-list list--shop-item">
<p class="list__photo"><img></p>
<ul>
<li></li>
<li></li>
</ul>
</section>
.media--person {
.list__photo > img {}
> ul {
> li {}
}
}
.media--shop-item {
.list__photo > img {}
> ul {
> li {}
}
}
CSSレイアウトの原則
CSSレイアウトの基本原則はObject Oriented CSS（OOCSS）に準じる。
OOCSSに述べられている以下の２項目について十分留意して実装する。
- 構造と見た目を分ける
- コンテナーとコンテンツを分ける
※ OOCSSは上述のSMACSSの元になる概念
構造と見た目を分ける
構造と見た目が混在している例
<section class="modal--error"></section>
<section class="modal--campaign"></section>
構造と見た目が分離している例
<section class="l-modal modal--error"></section>
<section class="l-modal modal--campaign"></section>
「modal」という構造要素に構造系のCSSを設定し、「error」や「campaign」というバリエーション（Modifier）要素に見た目のCSSを設定することで構造と見た目のCSSを混在させずきちんと分離する。
コンテナーとコンテンツを分ける
コンテナーとコンテンツが混在している例
<header class="header">
<p class="logo"></p>
</header>
<header class="footer">
<p class="logo"></p>
</header>
.header .logo {}
.footer .logo {}
コンテナーとコンテンツが分離している例
<header class="l-header">
<p class="logo"></p>
</header>
<header class="l-footer">
<p class="logo"></p>
</header>
.l-header .logo {}
.l-footer .logo {}
.logo {}
「header」や「footer」という場所の要素を含むコンテナー要素と、「logo」という役割や機能を表すコンテンツ要素をきちんと分離してレイアウト定義する。
セレクター命名規則
CSSセレクターの命名規則はMindBEMding記法に準じる。
あるモジュールのバリエーション（Modifier）はハイフン2つ「--」、モジュール内の子孫要素はアンダースコア2つ「__」で表現することで、セレクタ名だけでその役割を判断できるようにする。
<!-- バリエーション（Modifier）「--」 -->
<section class="l-alert"></section>
<section class="l-alert alert--warn"></section>
<section class="l-alert alert--error"></section>
<section class="l-alert alert--invite"></section>
<!-- 子孫要素（Element）「__」 -->
<section class="l-alert">
<div class="alert__text"></div>
<p class="alert__img"></p>
<p class="alert__title"><span></span></p>
</section>