Airbnb CSS / Sass 指南_html/css_WEB-ITnose

より合理的な方法で CSS と Sass を記述します

GitHub リンクの翻訳、修正を歓迎します。

Airbnb CSS/Sass スタイルガイドからの翻訳

目次

用語

ルールステートメント

(またはグループ) 選択肢 コンテナーと属性のセットは「ルール宣言」と呼ばれます。例:

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

セレクター

ルール宣言では、「セレクター」は DOM ツリー内の要素を選択する役割を果たし、これらの要素は定義されます。属性によって変更されます。セレクターは、HTML 要素と一致することも、要素のクラス名、ID、または要素が所有する属性と一致することもできます。以下にセレクターの例を示します。

.my-element-class {  /* ... */}[aria-hidden] {  /* ... */}

属性

最後に、属性はルール宣言で選択された要素のスタイルを決定します。属性はキーと値のペアの形式で存在し、ルール宣言には 1 つ以上の属性定義を含めることができます。プロパティ定義の例を次に示します。

/* some selector */ {  background: #f1f1f1;  color: #333;}

CSS

形式

• インデントには 2 つのスペースを使用します。
• クラス名にはキャメルケースではなくダッシュを使用することをお勧めします。 BEM を使用する場合は、アンダースコアも使用できます (下記を参照)。
• ID セレクターは使用しないでください。
• ルール宣言で複数のセレクターが適用される場合、各セレクターは独自の行を占有します。
• ルール宣言の左中括弧 { の前にスペースを追加します。
• 属性: のコロンの後にスペースを追加します。その前にはスペースを入れません。
• ルール宣言の閉じ中括弧 } は、単独の行にあります。
• ルール宣言は空行で区切ります。

悪い

.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 {  // ...}

コメント

• ブロックコメントではなく、行コメント(Sassでは//)を使用することをお勧めします。
• コメントは独立した行に入力することをお勧めします。行末コメントは避けてください。
• セルフコメントのないコードについては、次のような詳細な説明を記述します。
  • z-index が使用される理由
  • 互換性処理またはブラウザー固有のハック

OOCSS と BEM

次の理由から、OOCSS と BEM を組み合わせて使用​​することをお勧めします。

• は理解に役立ちます。 CSS と HTML の明確かつ厳密な関係を理解し​​ます。
• は、再利用可能で組み立てが簡単なコンポーネントの作成に役立ちます。
• はネストを減らし、特異性を下げる可能性があります。
• は、拡張可能なスタイル シートの作成に役立ちます。

OOCSS (「オブジェクト指向 CSS」とも呼ばれます) は、CSS を記述する方法であり、スタイル シートを「オブジェクト」のコレクションとして考えることを奨励することにより、再利用可能で繰り返し可能になります。コード スニペットを使用すると、Web サイト全体で複数回使用できます。

参考:

• Nicole Sullivan の OOCSS wiki
• Smashing Magazine の OOCSS 入門

「ブロック」とも呼ばれる BEM - Element-Modifier」は、HTML および CSS クラス名の命名規則です。 BEM はもともと Yandex によって提案されたもので、Yandex が膨大なコード ベースとスケーラビリティを持っていることを認識していました。BEM はそのために生まれ、OOCSS に準拠する一連の参照ガイダンス仕様として機能します。

• CSS トリックの BEM 101
• Harry Roberts による BEM の紹介

例

<article class="listing-card listing-card--featured">  <h1 class="listing-card__title">Adorable 2BR in the sunny Mission</h1>  <div class="listing-card__content">    <p>Vestibulum id ligula porta felis euismod semper.</p>  </div></article>

.listing-card { }.listing-card--featured { }.listing-card__title { }.listing-card__content { }

• .listing-card は、高レベルのコンポーネントを表すブロックです。
• .listing-card__title は .listing-card の一部である要素であるため、ブロックは要素で構成されます。
• .listing-card--featured は修飾子で、このブロックが .listing-card とは異なるステータスまたは変更を持つことを示します。

ID セレクター

CSS では要素を ID で選択することができますが、通常、誰もがこの方法を否定的な教材として挙げます。 ID セレクターはルール宣言に不必要に高い優先順位を与え、ID セレクターは再利用できません。

このトピックの詳細については、優先順位の処理方法に関する CSS Wizardry の記事を参照してください。

JavaScript フック

CSS と JavaScript で同じクラスをバインドしないようにします。そうしないと、開発者は通常、リファクタリング時に次の状況に陥ります。少なくとも、変更する各クラスを検索するのに時間を浪費するか、最悪の場合、機能が損なわれることを恐れて変更を加えません。

特定の JavaScript で使用するクラス名を作成する場合は、.js-prefix を追加することをお勧めします:

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

border

None For を定義する場合境界線スタイルの場合は、なしではなく 0 を使用します。

悪い

.foo {  border: none;}

良い

.foo {  border: 0;}

Sass

语法

• 使用 .scss的语法，不使用 .sass原本的语法。
• CSS 和 @include声明按照以下逻辑排序（参见下文）

属性声明的排序

1. 属性声明

   首先列出除去 @include和嵌套选择器之外的所有属性声明。

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

2. @include声明

   紧随后面的是 @include，这样可以使得整个选择器的可读性更高。

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

3. 嵌套选择器

   _如果有必要_用到嵌套选择器，把它们放到最后，在规则声明和嵌套选择器之间要加上空白，相邻嵌套选择器之间也要加上空白。嵌套选择器中的内容也要遵循上述指引。

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

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

变量

变量名应使用破折号（例如 $my-variable）代替 camelCased 和 snake_cased 风格。对于仅用在当前文件的变量，可以在变量名之前添加下划线前缀（例如 $_my-variable）。

Mixins

为了让代码遵循 DRY 原则（Don’t Repeat Yourself）、增强清晰性或抽象化复杂性，应该使用 mixin，这与那些命名良好的函数的作用是异曲同工的。虽然 mixin 可以不接收参数，但要注意，假如你不压缩负载（比如通过 gzip），这样会导致最终的样式包含不必要的代码重复。

扩展指令

应避免使用 @extend指令，因为它并不直观，而且具有潜在风险，特别是用在嵌套选择器的时候。即便是在顶层占位符选择器使用扩展，如果选择器的顺序最终会改变，也可能会导致问题。（比如，如果它们存在于其他文件，而加载顺序发生了变化）。其实，使用 @extend 所获得的大部分优化效果，gzip 压缩已经帮助你做到了，因此你只需要通过 mixin 让样式表更符合 DRY 原则就足够了。

嵌套选择器

请不要让嵌套选择器的深度超过 3 层！

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

当遇到以上情况的时候，你也许是这样写 CSS 的：

• 与 HTML 强耦合的（也是脆弱的） 或者
• 过于具体（强大） 或者
• 没有重用

再说一遍: 永远不要嵌套 ID 选择器！

如果你始终坚持要使用 ID 选择器（劝你三思），那也不应该嵌套它们。如果你正打算这么做，你需要先重新检查你的标签，或者指明原因。如果你想要写出风格良好的 HTML 和 CSS，你是 不应该这样做的。