CSSガイドライン （サンプル）

16675 ワード
CSS Sass MindBEMding SMACSS OOCSS CSS テキストリンク

CSSガイドライン

CSSファイルの読み込み

CSSファイル数

読み込む外部CSSファイルの数は原則として1画面につき1ファイル（all）、または2ファイル（共通ファイルと画面固有ファイル）程度に抑える。

読み込み位置

head要素の末尾よりに、link要素により読み込む。

sample.html
<head>
  〜（中略）〜
  <link rel="stylesheet" href="all.css">
</head>
sample.html
<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」

/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」

/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モジュール向けセレクター

sample.html
<nav class="l-navi navi--head">

限定的な要素セレクターの許容

推奨するclassセレクターの利用ではHTMLソースコードが冗長になりすぎる場合がある。

冗長な例
sample.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>
/module/sample.scss（冗長な例）
.media--person {
  .list__img {}
  .list__wrapper {}
  .list__item {}
}

.media--shop-item {
  .list__img {}
  .list__wrapper {}
  .list__item {}
}

モジュール内容の最小単位のため詳細度の影響を無視できると判断した場合は、要素セレクターを利用してソースコードの簡略化を図る。
ただしこの場合でも、チャイルドセレクター（Child selectors）「>」によりセレクターの影響範囲は限定しておくことが望ましい。

簡略化した例
sample.html（簡略化した例）
<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>
/module/sample.scss（簡略化した例）
.media--person {
  .list__photo > img {}
  > ul {
    > li {}
  }
}

.media--shop-item {
  .list__photo > img {}
  > ul {
    > li {}
  }
}

CSSレイアウトの原則

CSSレイアウトの基本原則はObject Oriented CSS（OOCSS）に準じる。
OOCSSに述べられている以下の２項目について十分留意して実装する。

  • 構造と見た目を分ける
  • コンテナーとコンテンツを分ける

※ OOCSSは上述のSMACSSの元になる概念

構造と見た目を分ける

構造と見た目が混在している例
sample.html（構造と見た目が混在している）
<section class="modal--error"></section>
<section class="modal--campaign"></section>
構造と見た目が分離している例
sample.html（構造と見た目が分離している）
<section class="l-modal modal--error"></section>
<section class="l-modal modal--campaign"></section>

「modal」という構造要素に構造系のCSSを設定し、「error」や「campaign」というバリエーション（Modifier）要素に見た目のCSSを設定することで構造と見た目のCSSを混在させずきちんと分離する。

コンテナーとコンテンツを分ける

コンテナーとコンテンツが混在している例
sample.html（コンテナーとコンテンツが混在している）
<header class="header">
  <p class="logo"></p>
</header>

<header class="footer">
  <p class="logo"></p>
</header>
/module/sample.scss（コンテナーとコンテンツが混在している）
.header .logo {}
.footer .logo {}
コンテナーとコンテンツが分離している例
sample.html（コンテナーとコンテンツが分離している）
<header class="l-header">
  <p class="logo"></p>
</header>

<header class="l-footer">
  <p class="logo"></p>
</header>
/layout/sample.scss（コンテナーとコンテンツが分離している）
.l-header .logo {}
.l-footer .logo {}
/module/sample.scss（コンテナーとコンテンツが分離している）
.logo {}

「header」や「footer」という場所の要素を含むコンテナー要素と、「logo」という役割や機能を表すコンテンツ要素をきちんと分離してレイアウト定義する。

セレクター命名規則

CSSセレクターの命名規則はMindBEMding記法に準じる。

あるモジュールのバリエーション（Modifier）はハイフン2つ「--」、モジュール内の子孫要素はアンダースコア2つ「__」で表現することで、セレクタ名だけでその役割を判断できるようにする。

sample.html
<!-- バリエーション（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>