CSSコーディング標準のブートストラップ

文法

二つのスペースの代わりにタブ（タブ）で - これは、すべての環境で表示する一貫したアプローチを保証する唯一の方法です。
セレクタは、ラインセレクタで別々にグループ化されている場合。
コードの可読性のために、ブロックの前に各ステートメントブレースは、スペースを追加します。
ブレースブロック文だけでは旅行をする必要があります。
各ステートメントは、ステートメントです:スペースを挿入する必要があります後。
より正確なエラー報告を得るためには、各ステートメントは別々の行にする必要があります。
すべての宣言文は、セミコロンで終了する必要があります。最後の宣言文の後ろのセミコロンはオプションですが、セミコロンを省略した場合、あなたのコードはより間違っている可能性があります。
カンマで区切られたプロパティの値については、各コンマは（例えば、空間に挿入されるべきbox-shadow ）。
んではないrgb() rgba() hsl() hsla()またはrect() 内部値の後ろにスペースを挿入コンマ。複数の属性値（また、カンマとスペースの両方）からのこのような利点は、カラー値（のみカンマ、スペースなし）、複数の区別するため。
（例えば、色の属性値またはパラメータのために、小数点0の前に1未満を省略.5の代わりに0.5 ; -.5px置き換え-0.5px ）。
16進値は、例えば、すべて小文字、でなければならない#fff 。原稿をスキャンすると、その形状がより容易に識別可能であるので、小文字簡単、区別するために。
で、例えば、16進数値の短い形式を使用してみてください#fffの代わりに#ffffff 。
例えば、プロパティを選択するための二重引用符を追加input[type="text"] 。特定の状況においてのみ、それはオプションで二重引用符で一貫性のコードの提案のために、しかし、。
で、例えば、回避するために、指定された値に0単位margin: 0;の代わりにmargin: 0px;

本明細書中で使用される用語について質問がありますか？上のウィキペディアを参照してください文法-カスケーディングスタイルシート。

/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
  padding:15px;
  margin:0px 0px 15px;
  background-color:rgba(0, 0, 0, 0.5);
  box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}

/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}

宣言順

不動産関連書類は、次の順序でグループ化して配置する必要があります。

ポジショニング
ボックスモデル
活版印刷の
ビジュアル

ポジショニング（位置決め）などの通常のドキュメントフローから要素を削除し、またスタイルに関連するボックスモデル（ボックスモデル）を覆うので、最初の行にすることができます。第二にボックスモデルは、コンポーネントのサイズと位置を決定するから。

その他のプロパティは、内部コンポーネント（内側）に影響を与えるか、または最初の2つのグループが背面になるよう、属性には影響しません。

完全なプロパティのリストとその順序を参照してください休会。

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}

使用しないでください`@import`

そして、 <link>比較タグ、 @importはるかに遅いだけでなく、追加の要求の数を増加させるだけでなく、予期しない問題が発生するコマンド。いくつかの選択肢があります：

複数を使用して<link>要素
サスやCSSプリプロセッサ複数のCSSファイルなどの以下であることが一つのファイルにコンパイルされています
Railsのことで、ジキルまたは他のシステムは、CSSファイルのマージ機能を提供しました

参照してくださいスティーブSoudersの記事より多くの知識を習得します。

<!-- Use link elements -->
<link rel="stylesheet" href="core.css">

<!-- Avoid @imports -->
<style>
  @import url("more.css");
</style>

メディアクエリ（メディアクエリ）の位置

メディアクエリは、関連する規則の近くに配置します。単一のスタイルファイルでそれらをパック、または文書の下部にしないでください。あなたは離れてそれらを取る場合、および将来のすべての人に忘れ去られます。ここでは代表的な例です。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (min-width: 480px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

属性の接頭辞を持ちます

各プロパティの値は、垂直方向に整列されることができインデント、接頭辞ベンダー固有の属性を使用する場合は、複数行の編集が容易です。

TextMateで、 編集→選択（の各ラインのテキストを使用して^⌘Aを）。崇高テキスト2では→前の行の（^を⇧↑追加 、 選択を使用）と選択→次の行（^⇧↓を追加します ）。

/* Prefixed properties */
.selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
          box-shadow: 0 1px 2px rgba(0,0,0,.15);
}

シングルラインルールの宣言

読みやすさと迅速な編集を容易にするために、唯一の文が含まれているスタイルのために、私たちは同じ行に声明することをお勧めします。宣言またはステートメントでのスタイルの数については複数行に分割する必要があります。

これを行う上で重要な要素は、エラーを検出することである - 例えば、CSSのバリデータは183行に構文エラーがあることを指摘しました。それは単一行、単一の文である場合は、このエラーを無視しません。それは、単一のラインステートメント以上であれば、あなたは慎重に行方不明避けるために間違いを分析する必要があります。

/* Single declarations on one line */
.span1 { width: 60px; }
.span2 { width: 140px; }
.span3 { width: 220px; }

/* Multiple declarations, one per line */
.sprite {
  display: inline-block;
  width: 16px;
  height: 15px;
  background-image: url(../img/sprite.png);
}
.icon           { background-position: 0 0; }
.icon-home      { background-position: 0 -20px; }
.icon-account   { background-position: 0 -40px; }

速記プロパティ宣言

明示的にすべての場合の値を設定する必要性を、私たちは速記プロパティ宣言の使用を制限しようとする必要があります。次のような状況一般的に虐待を受け速記プロパティが宣言されました：

padding
margin
font
background
border
border-radius

ほとんどの場合、我々は属性宣言省略形のすべての値を指定する必要はありません。ちょうど覆う必要な場合、例えば、HTMLのみセット上下の余白の要素を見出し（マージン）の値は、従って、これらの2つの値とすることができます。過度の使用は、プロパティ宣言の短い形式は、紛らわしいコードにプロパティ値を導くことができると予期せぬ副作用を引き起こす不必要な重複をもたらすだろう。

非常に良いアイデアにMDN（Mozillaの開発者ネットワーク）速記プロパティの記事のは、あまり馴染みの速記プロパティ宣言とユーザーの行動のために有用です。

/* Bad example */
.element {
  margin: 0 0 10px;
  background: red;
  background: url("image.jpg");
  border-radius: 3px 3px 0 0;
}

/* Good example */
.element {
  margin-bottom: 10px;
  background-color: red;
  background-image: url("image.jpg");
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}

以下、サスネストされました

不要なネストを避けてください。あなたが巣を使用することができますが、それはあなたがネストされた使用する必要があるという意味ではありませんがためです。スタイルだけであなたは、親要素（すなわち子孫セレクタ）以内に制限する必要があり、ネストされた使用して、ネストした複数の素子にのみ存在する必要があります。

// Without nesting
.table > thead > tr > th { … }
.table > thead > tr > td { … }

// With nesting
.table > thead > tr {
  > th { … }
  > td { … }
}

ノート

コードが書かれ、人々によって維持されています。あなたのコードは、よくコメントや他人を理解しやすい自己記述することができることを確認してください。良いコードのコメントは、コードのコンテキストと目的を伝えることができます。単にコンポーネントやクラス名を繰り返すしないでください。

一般的なコメントのために、簡単なフレーズを書くことができます。長いコメントのために、完全な文章を書くようにしてください。

/* Bad example */
/* Modal header */
.modal-header {
  ...
}

/* Good example */
/* Wrapping element for .modal-title and .modal-close */
.modal-header {
  ...
}

クラス名

クラス名は小文字のみとダッシュ（dashe）（下線はない、またこぶ命名法）を表示することができます。ダッシュ（名前空間のような）という名前の関連するクラス（例えば、使用する必要があり.btnと.btn-danger ）。
過度の任意の速記を避けてください。 .btn代表ボタンが、 .s意味を表現していません。
クラス名は、短く、明確な意味でなければなりません。
意味のある名前を使用してください。名前の組織または意図的な使用は、表現（体裁）の名前を使用しないでください。
新しいクラスの接頭辞として最も近い親クラスまたは基本（ベース）クラスに基づきます。
使用.js-* （スタイルとは対照的に）行動を識別するために、およびCSSファイルにこれらのクラスが含まれていないクラス。

サスや変数の命名のためのあまりにも、上記のすべての仕様を読んでされています。

/* Bad example */
.t { ... }
.red { ... }
.header { ... }

/* Good example */
.tweet { ... }
.important { ... }
.tweet-header { ... }

セレクタ

共通の要素は、クラスを使用するために、そのように資するレンダリング性能を最適化します。
コンポーネントは、多くの場合（たとえば、プロパティセレクタの使用を避けるために[class^="..."] ブラウザの性能はこれらの要因によって影響されます。
可能な限り短くし、セレクタの要素の数を制限しようとするセレクタは、3を超えないことをお勧めします。
親要素の最後のクラス（すなわち子孫セレクタ）に制限する必要がある場合にのみ （たとえば、接頭辞を持つクラスを使用していない-名前空間接頭辞が似ています）。

深い読み：

/* Bad example */
span { ... }
.page-container #stream .stream-item .tweet .tweet-header .username { ... }
.avatar { ... }

/* Good example */
.avatar { ... }
.tweet-header .username { ... }
.tweet .avatar { ... }

コードの組織

コンポーネント単位組織コード。
一貫性のあるアノテーション仕様の開発。
大きな文書をスキャンするので、助長コードのブロックに分け、一貫した空白を使用してください。
もし複数のCSSのスピンオフの形でファイル、アセンブリではなく、ページ、ページが再編成され、アセンブリが移動されますので。

/*
 * Component section heading
 */

.element { ... }


/*
 * Component section heading
 *
 * Sometimes you need to include optional context for the entire component. Do that up here if it's important enough.
 */

.element { ... }

/* Contextual sub-component or modifer */
.element-heading { ... }

設定エディタ

共通コードの矛盾点と相違点を回避するために、次の設定に応じて、あなたのエディタ：

二つのスペースの代わりにタブ（スペースでタブ文字を代表するソフトタブ）。
ファイルを保存すると末尾の空白を削除します。
UTF-8へのファイルのエンコーディングを設定します。
ファイルの最後に空白行を追加します。

ドキュメントを参照すると、プロジェクトに設定情報を追加し.editorconfigファイル。たとえば、次のように.editorconfigインスタンス内のブートストラップに。詳細については、を参照してくださいについてEditorConfig 。

前：HTMLのコーディング規則ブートストラップ

Bootstrap コース

Bootstrap CSS

Bootstrap レイアウトコンポーネント

Bootstrap ウィジェット

Bootstrap 他の

CSSコーディング標準のブートストラップ

文法

宣言順

使用しないでください`@import`

メディアクエリ（メディアクエリ）の位置

属性の接頭辞を持ちます

シングルラインルールの宣言

速記プロパティ宣言

以下、サスネストされました

ノート

クラス名

セレクタ

コードの組織

設定エディタ

Bootstrap コース

Bootstrap CSS

Bootstrap レイアウトコンポーネント

Bootstrap ウィジェット

Bootstrap 他の

CSSコーディング標準のブートストラップ

文法

宣言順

使用しないでください@import

メディアクエリ（メディアクエリ）の位置

属性の接頭辞を持ちます

シングルラインルールの宣言

速記プロパティ宣言

以下、サスネストされました

ノート

クラス名

セレクタ

コードの組織

設定エディタ

使用しないでください`@import`