ブートストラップ CSS コーディング仕様

構文

• タブの代わりに 2 つのスペースを使用します。これが、すべての環境で一貫したプレゼンテーションを保証する唯一の方法です。

• セレクターをグループ化するときは、個々のセレクターを独自の行に配置します。

• コードを読みやすくするために、各宣言ブロックの左中括弧の前にスペースを追加します。

• 宣言ブロックの右中括弧は別の行に置く必要があります。

• 各宣言ステートメント : の後にスペースを挿入する必要があります。 : 后应该插入一个空格。

• 为了获得更准确的错误报告，每条声明都应该独占一行。

• 所有声明语句都应当以分号结尾。最后一条声明语句后面的分号是可选的，但是，如果省略这个分号，你的代码可能更易出错。

• 对于以逗号分隔的属性值，每个逗号后面都应该插入一个空格（例如，box-shadow）。

• 不要在 rgb()、rgba()、hsl()、hsla() 或 rect() 值的内部的逗号后面插入空格。这样利于从多个属性值（既加逗号也加空格）中区分多个颜色值（只加逗号，不加空格）。

• 对于属性值或颜色参数，省略小于 1 的小数前面的 0 （例如，.5 代替 0.5；-.5px 代替 -0.5px）。

• 十六进制值应该全部小写，例如，#fff。在扫描文档时，小写字符易于分辨，因为他们的形式更易于区分。

• 尽量使用简写形式的十六进制值，例如，用 #fff 代替 #ffffff。

• 为选择器中的属性添加双引号，例如，input[type="text"]。只有在某些情况下是可选的，但是，为了代码的一致性，建议都加上双引号。

• 避免为 0 值指定单位，例如，用 margin: 0; 代替 margin: 0px;

宣言の順序

関連するプロパティの宣言は、次の順序でグループ化して配置する必要があります。

1. 他のプロパティは、

   コンポーネントの内部

   にのみ影響を与えるか、プロパティの最初の 2 つのグループには影響を与えないため、後ろにランクされます。
2. 属性の完全なリストとその順序については、「Recess」を参照してください。

.declaration-order {
3. /* 位置決め */

   位置: 絶対;

   上: 0;
右: 0;
4. 下: 0;

   左: 0;

   z-index: 100;

表示: ブロック;

幅: 100px; 高さ: 100px;

フォント: 通常 13px "Helvetica Neue", sans-serif;

@import

与 <link> 标签相比，@import 指令要慢很多，不光增加了额外的请求次数，还会导致不可预料的问题。替代办法有以下几种：

• 使用多个 <link><!-- リンク要素を使用します -->

  <link rel="stylesheet" href="core.css">
• <!-- @imports を避けます -->

  < style>

  @import url("../style/css/more.css");
</style>

• メディアクエリの位置

  メディアクエリを関連するルールのできるだけ近くに配置します。これらを単一のスタイル ファイルにパッケージしたり、ドキュメントの最後に配置したりしないでください。分けてしまえば、将来的には誰からも忘れられるだけです。典型的な例を以下に示します。

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

  接頭辞付き属性

  特定のベンダーの接頭辞付き属性を使用する場合は、インデントを使用します。各プロパティの値は、垂直方向に揃えられます。複数行の編集が容易になります。

  Textmate で、テキスト → 選択範囲内の各行を編集 (⌃⌘A) を使用します。 Sublime Text 2 では、選択 → 前の行の追加 (⌃⇧↑) と 選択 → 次の行の追加 (⌃⇧↓) を使用します。

  /* プレフィックス付きプロパティ */
  .selector {
  -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
  box-shadow: 0 1px 2px rgba(0,0, 0,.15);
  }

  単一行のルール宣言

  宣言が 1 つだけ含まれるスタイルの場合、読みやすさと迅速な編集のために、ステートメントを同じ行に置くことをお勧めします。複数の宣言を持つスタイルの場合でも、宣言は複数の行に分割する必要があります。

  これを行う際の重要な要素はエラー検出です。たとえば、CSS バリデーターは 183 行目に構文エラーがあることを示します。 1 行に 1 つのステートメントがある場合は、エラーを無視できません。1 行に複数のステートメントがある場合は、エラーを見逃さないように注意深く分析する必要があります。

  /* 1 行に 1 つの宣言 */
  .span1 { width: 60px; }
  .span2 { width: 140px; }
  .span3 { width: 220px; }
  
  /* 1 行に 1 つ/
  .sprite {
  表示: インラインブロック;
  幅: 16px;
  高さ: 15px;
  背景画像: url(../style/images/sprite.png);
  }
  .icon { 背景位置: 0 0; }
  .icon-home { 背景の位置: 0 -20px; }
  .icon-account { 背景の位置: 0 -40px;

  省略されたプロパティ宣言

  すべての値を明示的に設定する必要がある状況では、省略されたプロパティ宣言の使用はできる限り制限される必要があります。省略された属性宣言の一般的な悪用は次のとおりです:

  • paddingpadding

  • margin

  • font

  • background

  • border

  • border-radius

  margin

  font

  
  
  background



border



border-radius
  
  
  
  ほとんどの場合、プロパティ宣言を省略する必要はありませんすべての値を指定します。たとえば、HTML 見出し要素は上マージンと下マージンの値を設定するだけでよいため、必要な場合にこれら 2 つの値をオーバーライドするだけで済みます。省略表現のプロパティ宣言を過度に使用すると、コードが乱雑になる可能性があり、プロパティ値の不必要なオーバーライドを引き起こして、意図しない副作用が発生する可能性があります。
  

  MDN (Mozilla Developer Network) には、短縮プロパティに関する非常に優れた記事があり、短縮プロパティの宣言とその動作に慣れていないユーザーにとって非常に役立ちます。

  /* 悪い例 */

  .element {

  margin: 0 0 10px;

  バックグラウンド: red;

  バックグラウンド: url("../style/images/image.jpg");
  border-radius: 3px 3px 0 0;
  }
  
  /* 良い例 */
  .element {
  margin-bottom: 10px;
  バックグラウンドカラー: 赤;
  バックグラウンドイメージ: url("../style/images/image.jpg ");

  border-top-left-radius: 3px;

  border-top-right-radius: 3px;🎜}🎜🎜🎜Sass でのレス化とネスト🎜🎜不必要なネストは避けてください。これは、ネストを使用することはできますが、必ずしも使用する必要があるわけではないためです。ネストは、スタイルを親要素 (つまり、子孫セレクター) に制限する必要があり、ネストする必要がある要素が複数ある場合にのみ使用します。 🎜🎜//ネストなし🎜.table > thead > th { … }🎜🎜// ネストあり🎜 ; tr {🎜 > th { … }🎜 >

  コメント

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

  長いコメントの場合は、必ず完全な文を書いてください。一般的なコメントの場合は、簡潔なフレーズを書いてください。

  /* 悪い例 */
  /* モーダルヘッダー */
  .modal-header {
  ...
  }
  
  /* 良い例 */
  /* .modal-title と .modal- のラッピング要素close */
  .modal-header {
  ...
  }

  クラスの名前付け

  • class 名前には小文字とダッシュ (ダッシュ) のみを使用できます (下線やキャメルケースは使用できません)。関連クラスの名前付けにはダッシュを使用する必要があります (名前空間と同様) (たとえば、.btn や .btn-danger)。 .btn 和 .btn-danger）。

  • 避免过度任意的简写。.btn 代表 button，但是 .s 不能表达任何意思。

  • class 名称应当尽可能短，并且意义明确。

  • 使用有意义的名称。使用有组织的或目的明确的名称，不要使用表现形式（presentational）的名称。

  • 基于最近的父 class 或基本（base） class 作为新 class 的前缀。

  • 使用 .js-*

  過度に恣意的な略語は避けてください。 .btn はボタンを表しますが、.s は意味を表現できません。

  クラス名はできるだけ短く、明確な意味を持つ必要があります。
  
  
  
  意味のある名前を使用してください。見せかけの名前ではなく、整理された、または目的を持った名前を使用してください。
  
  
  
  最も近い親クラスまたは基本クラスに基づいて、新しいクラスにプレフィックスを付けます。

  🎜🎜 .js-* クラスを使用して (スタイルではなく) 動作を識別し、これらのクラスを CSS ファイルに含めないでください。 🎜🎜🎜🎜 Sass 変数と Less 変数に名前を付けるときに、上記の仕様を参照することもできます。 🎜🎜🎜/* 悪い例 */🎜.t { ... }🎜.red { ... }🎜.header { ... }🎜🎜/* 良い例 */🎜.tweet { ... }🎜 .重要 { ... }🎜.ツイートヘッダー { ... }🎜🎜

  Selector

  • 共通の要素にクラスを使用します。これは、レンダリング パフォーマンスの最適化に役立ちます。

  • 頻繁に発生するコンポーネントの場合は、属性セレクター (例: [class^="..."]) の使用を避けてください。ブラウザのパフォーマンスは、次の要因によって影響を受ける可能性があります。 [class^="..."]）。浏览器的性能会受到这些因素的影响。

  • 选择器要尽可能短，并且尽量限制组成选择器的元素个数，建议不要超过 3 。

  • 只有在必要的时候才将 class 限制在最近的父元素内（也就是后代选择器）（例如，不使用带前缀的 class 时 -- 前缀类似于命名空间）。

  扩展阅读：

  • Scope CSS classes with prefixes

  • Stop the cascade

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

  编辑器配置

  将你的编辑器按照下面的配置进行设置，以避免常见的代码不一致和差异：

  • 用两个空格代替制表符（soft-tab 即用空格代表 tab 符）。

  • 保存文件时，删除尾部的空白符。

  • 设置文件编码为 UTF-8。

  • 在文件结尾添加一个空白行。

  参照文档并将这些配置信息添加到项目的 .editorconfig

  
  セレクターはできるだけ短くし、セレクターを構成する要素の数を 3 つを超えないようにすることをお勧めします。

  🎜🎜🎜必要な場合、クラスを最も近い親要素 (つまり、子孫セレクター) にのみ制限します (たとえば、接頭辞付きのクラスを使用しない場合 - 接頭辞は名前空間に似ています) ）。 🎜🎜