Approach

スタートページでは、プロジェクトとそれが提供するものを紹介していますが、このドキュメントでは、Bootstrap で行うことの「理由」に焦点を当てています。他の人が私たちから学び、共に貢献し、私たちの改善を助けることができるように、ウェブ上の構築に対する私たちの哲学を説明します。

何かおかしな点や、もっと良い方法があるのではないかとお考えですか？イシューを開く-あなたと一緒に議論したいと思います。

Summary

それぞれの項目については後ほど詳しく説明しますが、大まかには以下のようなアプローチをとっています。

• コンポーネントは、レスポンシブでモバイルファーストであるべき
• コンポーネントは、ベースクラスで構築され、モディファイアクラスで拡張されるべきである。
• コンポーネントの状態は、共通の z-index スケールに従うべきである。
• 可能な限り、JavaScript ではなく、HTML と CSS で実装すること
• 可能な限り、カスタムスタイルではなくユーティリティを使用する
• 可能な限り、厳格な HTML 要件（children selectors）の適用を避ける。

Responsive

Bootstrap のレスポンシブスタイルは、レスポンシブであることを前提に作られており、このアプローチはしばしばmobile-firstと呼ばれます。私たちはこの用語をドキュメントで使用しており、ほぼ同意していますが、時にそれは広すぎることがあります。Bootstrap では、すべてのコンポーネントが完全にレスポンシブでなければならないわけではありませんが、このレスポンシブアプローチは、ビューポートが大きくなるとスタイルを追加するように促すことで、CSS のオーバーライドを減らすことを目的としています。

Bootstrap 全体では、メディアクエリでこれを最も明確に見ることができます。ほとんどの場合、特定のブレークポイントで適用され始め、より高いブレークポイントまで続く min-width クエリを使用します。例えば、.d-none は min-width: 0 から無限大まで適用されます。一方、.d-md-none は、中程度のブレークポイントから上に適用されます。

コンポーネント固有の複雑さが必要な場合には、max-width を使用することもあります。時には、コンポーネントのコア機能を書き換えるよりも、このようなオーバーライドの方が機能的にも精神的にもスッキリした状態で実装やサポートができることもあります。私たちはこのような方法を制限するように努めていますが、時折使用することがあります。

Classes

クロスブラウザ対応の正規化スタイルシート「Reboot」を除き、私たちのスタイルはすべてクラスをセレクタとして使用することを目的としています。これは、タイプセレクタ（例：input[type="text"]）や、スタイルを簡単にオーバーライドできないような特殊なものにする余計な親クラス（例：.parent .child）を避けることを意味します。

そのため、コンポーネントは、一般的な、オーバーライドできないプロパティと値のペアを格納するベースクラスで構築されるべきです。例えば、.btnや.btn-primaryなどです。ここでは、display, padding, border-width などの一般的なスタイルには .btn を使用します。そして、.btn-primaryのようなモディファイアを使って、色や背景色、ボーダーカラーなどを追加します。

修飾子クラスは、複数のバリアントで変更すべき複数のプロパティや値がある場合にのみ使用してください。修飾子は必ずしも必要なものではないので、作成する際には実際にコードの行数を節約し、不必要なオーバーライドを防いでいることを確認してください。修飾子の良い例としては、テーマのカラークラスやサイズバリアントなどがあります。

z-index scales

Bootstrap には、コンポーネント内の要素とオーバーレイコンポーネントの 2 つのz-indexスケールがあります。

Component elements

• Bootstrap のコンポーネントの中には、borderプロパティを修正しなくてもダブルボーダーにならないように、要素が重なって作られているものがあります。例えば、ボタングループ、入力グループ、ページネーションなどです。
• これらのコンポーネントは、0から3の標準的なz-indexスケールを共有しています。
• 0はデフォルト（初期）、1は:hover、2は:active/.active、3は:focusです。
• このアプローチは、ユーザーの優先度が最も高いという私たちの期待にマッチしています。フォーカスされた要素は、視界に入り、ユーザーの注意を引くことになります。アクティブな要素は、状態を示すので 2 番目に高い。ホバーはユーザーの意図を示すので 3 番目に高いですが、ほとんどすべてのものがホバーされます。

Overlay components

Bootstrap には、ある種のオーバーレイとして機能するコンポーネントがいくつかあります。これには、z-indexの大きい順に、ドロップダウン、固定およびスティッキーナビバー、モーダル、ツールチップ、ポップオーバーが含まれます。これらのコンポーネントには、1000から始まる独自のz-indexスケールがあります。この開始値は任意に選ばれたもので、弊社のスタイルとお客様のプロジェクトのカスタムスタイルの間の小さなバッファとして機能します。

各オーバーレイコンポーネントは、一般的な UI の原則により、ユーザーがフォーカスしたりホバーした要素が常に表示されたままになるように、z-indexの値をわずかに増加させます。例えば、モーダルはドキュメントブロック（例：モーダルのアクションを除いて他のアクションを取ることができない）なので、それをナビバーの上に配置します。

これについては、z-index レイアウトページで詳しく説明しています。

HTML and CSS over JS

可能な限り、私たちは JavaScript よりも HTML と CSS を書きたいと考えています。一般的には、HTML と CSS の方が普及しており、様々な経験値を持つより多くの人がアクセスできます。また、HTML と CSS は、JavaScript よりもブラウザでの処理が速く、一般的にブラウザが多くの機能を提供してくれます。

この原則は、data属性を使った私たちのファーストクラスの JavaScript API です。私たちの JavaScript プラグインを使用するために、ほとんどすべての JavaScript を記述する必要はありません。これについては、JavaScript の概要で詳しく説明しています。

最後に、私たちのスタイルは、一般的なウェブ要素の基本的な動作に基づいています。可能な限り、ブラウザが提供するものを使用したいと考えています。たとえば、ほとんどの要素に .btn クラスを付けることができますが、ほとんどの要素は意味的な価値やブラウザの機能を提供していません。そこで、代わりに<button>や<a>を使用しています。

より複雑なコンポーネントについても同様です。入力の状態に応じて親要素にクラスを追加し、それによってテキストに赤のスタイルを与えるフォーム検証プラグインを独自に書くこともできますが、私たちはすべてのブラウザが提供する :valid/:invalid 疑似要素を使用することを好みます。

Utilities

Bootstrap 3 ではヘルパーとなったユーティリティクラスは、CSS の肥大化やページパフォーマンスの低下に対処する強力な味方です。ユーティリティクラスは、通常、クラスとして表現された単一の、不変のプロパティと値のペアです（例えば、.d-blockは、display: block;を表します）。ユーティリティクラスの最大の魅力は、HTML を記述する際のスピードと、カスタム CSS の記述量を制限することです。

特にカスタム CSS に関しては、ユーティリティーを使って、よく繰り返されるプロパティと値のペアを一つのクラスにまとめることで、ファイルサイズの増大に対処することができます。これは、プロジェクトの規模に応じて劇的な効果を発揮します。

Flexible HTML

常に可能というわけではありませんが、私たちはコンポーネントのための HTML 要件に過度に固執しないように努めています。そのため、CSS のセレクタでは単一のクラスに焦点を当て、直接の子セレクタ(>)は避けるようにしています。これにより、実装の自由度が増し、CSS をよりシンプルに、より特殊にしないようにしています。

Code conventions

コードガイド (Bootstrap 共同開発者の@mdo さんより) Bootstrap での HTML と CSS の書き方を文書化したものです。一般的な書式、常識的なデフォルト、プロパティや属性の順序などのガイドラインを規定しています。

私たちは、Stylelintを使って、Sass/CSS でこれらの標準やその他のことを実施しています。Our custom Stylelint configはオープンソースで、他の人が使用したり拡張したりすることができます。

私たちはvnu-jarを使って、標準的でセマンティックな HTML を実現し、一般的なエラーも検出しています。