Home

Awesome

Airbnb CSS / Sass スタイルガイド

CSSとSASSを合理的に書くためのガイド

目次

  1. 用語 - スタイルの宣言 - セレクタ - プロパティ
  2. CSS - フォーマット - コメント - OOCSSとBEM - IDセレクタ - JavaScriptフック - ボーダー
  3. Sass - シンタックス - 順序 - 変数 - ミックスイン - Extend記法 - セレクタのネスト
  4. 翻訳

用語

スタイルの宣言

"スタイルの宣言"とはセレクタ（もしくは複数のセレクタ）とそれに伴う１つ以上のプロパティのことである。 以下、例。

.listing {
  font-size: 18px;
  line-height: 1.2;
}

セレクタ

スタイルの宣言において、"セレクタ"はプロパティによってどのDOMにおける要素をスタイリングするかを決定するものである。セレクタはHTML要素のclass,id,もしくはその他のattributeのどれかにあたるものである。以下はセレクタの例である。

.my-element-class {
  /* ... */
}

[aria-hidden] {
  /* ... */
}

プロパティ

そして、プロパティは要素に対してスタイルを実際に定義するものである。プロパティはキーと値のセットであり、スタイルの宣言は１つ以上のプロパティの宣言を含むことができる。プロパティの定義は以下のようである。

/* ここにセレクタを記述する */ {
  background: #f1f1f1;
  color: #333;
}

CSS

フォーマット

悪い例

.avatar{
    border-radius:50%;
    border:2px solid white; }
.no, .nope, .not_good {
    // ...
}
#lol-no {
  // ...
}

良い例

.avatar {
  border-radius: 50%;
  border: 2px solid white;
}

.one,
.selector,
.per-line {
  // ...
}

コメント

OOCSS と BEM

OOCSSとBEMの組み合わせを推奨。理由は以下の通り:

OOCSS, もしくは “オブジェクト指向CSS”とは、スタイルシートをオブジェクトの集合として考えやすくするためにCSSを書く方法の一つである。ここでいうオブジェクトの集合の、 “オブジェクト”とはウェブサイトとは独立した再利用しやすいスニペットをさす。

BEM, もしくは“Block-Element-Modifier”, とはHTMLとCSSの命名規則である。Yandexのコードの拡張性についての思想から発展し、OOCSSを実装するためのガイドラインとして存在している。

BEMの変形であるパスカルケースを用いた “blocks”は、コンポーネント(Reactなど)を用いた時に特にうまく機能すると考えている。アンダースコアやダッシュはモディファーや子要素に使われている。

例

// ListingCard.jsx
function ListingCard() {
  return (
    <article class="ListingCard ListingCard--featured">

      <h1 class="ListingCard__title">Adorable 2BR in the sunny Mission</h1>

      <div class="ListingCard__content">
        <p>Vestibulum id ligula porta felis euismod semper.</p>
      </div>

    </article>
  );
}

/* ListingCard.css */
.ListingCard { }
.ListingCard--featured { }
.ListingCard__title { }
.ListingCard__content { }

IDセレクタ

CSSではIDによってセレクタとして要素を決定することができるが、それはアンチパターンとして考えられるべきでもある。IDセレクタはスタイルの宣言に不必要に高い詳細度をもたらし、再利用ができない。

この詳細度の扱いについては CSS Wizardry's articleを読むと良い。

JavaScript フック

同じクラスをCSSとJavaScriptの両方でバインディング（JSのイベントをつけつつスタイリングを行うなど）をするのは避けること。この２つを混同することは少なくとも開発者が変更を行うCSSとJavaScriptの両方を理解しなければならないことになり時間の無駄であるし、最悪の場合は機能が壊れることを恐れて変更をすることを躊躇してしまう。

.js-という接頭辞を持つJavaScriptバインド専用のクラスを作ることを推奨する。

<button class="btn btn-primary js-request-to-book">Request to Book</button>

ボーダーBorder

ボーダーのないスタイルにはnoneの代わりに0を使うこと。

悪い例

.foo {
  border: none;
}

良い例

.foo {
  border: 0;
}

Sass

シンタックス

プロパティの宣言順序

  1. プロパティの宣言

    @includeやネストセレクタなどではない通常のプロパティを全て並べる

    .btn-green {
  background: green;
  font-weight: bold;
  // ...
}

  2. @include記法の記述

    @includeのまとまりを作るとセレクタ全体を読むのが楽になる

    .btn-green {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);
  // ...
}

  3. セレクタのネスト

    セレクタのネストは,仮に必要なのであれば, 中括弧の最後に記述しその後ろには何も書かない。ネストされたスタイルの宣言の前には１行空ける。また、上記の複数セレクタと同様に複数セレクタを記述する際は上記のガイドラインにしたがって１行に１セレクタの記述とする。

    .btn {
  background: green;
  font-weight: bold;
  @include transition(background 0.5s ease);

  .icon {
    margin-right: 10px;
  }
}

変数

変数の名前にはキャメルケースやスネークケースではなくダッシュつなぎを使用する。接頭辞として同じファイル内でのみ使われる変数に関しては例外として使用を認める。(例. $_my-variable)

ミックスイン

ミックスインはDRY(Don't Repeat Yourselfの略)にし明快にするため、もしくは良い名前がつけられた関数のように複雑さを抽象化するために使われるべきだ。このためにミックスインを使うのは何ら問題ないが、もしファイル通信を圧縮していないのであれば（例. gzipなど）,　このことは余計なコードの重複をもたらすので注意しなければならない。

Extend記法

@extend 記法は直感的ではなく、危険な振る舞いを引き起こす可能性があるため、特にネストさせている場合などは使うべきではない。たとえ一番上の階層で仮置きとしてのセレクタを拡張するのだとしても、もしセレクタの順序を後々変更してしまった場合などに問題を引き起こす。（例えば異なるファイルにその記述があり、ファイルのロード順序がずれた場合など） gzipをかければ@extendを使うことによって得られる合理的な出力結果のメリットの大抵はカバーできるし、ミックスインを使えばDRYな素晴らしいコードを生み出すことができる。

セレクタのネスト

３階層以上ネストさせない

.page-container {
  .content {
    .profile {
      // STOP!
    }
  }
}

もしセレクタの階層がこれほど深くなった場合、あなたのCSSは以下のようになっていると考えられる:

もう一度： 決してIDセレクタはネストさせてはいけない!

もしIDセレクタを最初におきたい場合（本来やるべきではないが）、決してネストさせてはいけまない。もしあなた自身がこのようなことをしていると気づいた場合は、もう一度マークアップを見直すかなぜそのような強い詳細度にしなければならなかったのかを確認する必要がある。もしHTMLとCSSを正しいフォーマットで書いていればこのようなことをする必要は絶対にない。

翻訳

このスタイルガイドでは以下の言語でも読むことができます: