アプローチ

はじめにのページでは、プロジェクトとそれが提供するものについての入門的なツアーを提供しますが、このドキュメントでは、Bootstrapでなぜ私たちがそうするのかに焦点を当てています。Web上での構築に対する私たちの哲学を説明し、他の人が私たちから学び、私たちと協力し、改善に役立つようにします。

何か正しくないことや、もっとうまくできると思われるものが見つかりましたか？ Issueを開いてください。ぜひご意見をお聞かせください。

概要

これらについては、今後さらに詳しく説明しますが、大まかに言って、私たちの取り組みを導くものは次のとおりです。

• コンポーネントはレスポンシブでモバイルファーストである必要がある
• コンポーネントはベースクラスで構築し、モディファイヤークラスを介して拡張する必要がある
• コンポーネントの状態は、共通のz-indexスケールに従う必要がある
• 可能な限り、JavaScriptではなくHTMLおよびCSSの実装を優先する
• 可能な限り、カスタムスタイルよりもユーティリティを使用する
• 可能な限り、厳密なHTML要件（子セレクター）を強制しない

レスポンシブ

Bootstrapのレスポンシブスタイルは、モバイルファーストと呼ばれることが多いアプローチで、レスポンシブになるように構築されています。私たちはドキュメントでこの用語を使用し、おおむね同意していますが、時には広すぎる場合があります。すべてのコンポーネントがBootstrapで完全にレスポンシブである必要はありませんが、このレスポンシブなアプローチは、ビューポートが大きくなるにつれてスタイルを追加するように促すことで、CSSオーバーライドを減らすことを目的としています。

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

コンポーネントの固有の複雑さによって必要な場合は、max-widthを使用することもあります。これらのオーバーライドは、コンポーネントのコア機能を書き換えるよりも、機能的かつ精神的に実装およびサポートが容易な場合があります。私たちはこのアプローチを制限するよう努めていますが、時々使用します。

クラス

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

したがって、コンポーネントは、オーバーライドされない共通のプロパティと値のペアを格納するベースクラスで構築する必要があります。たとえば、.btnと.btn-primaryです。.btnは、display、padding、border-widthなどのすべての共通スタイルに使用します。次に、.btn-primaryのようなモディファイヤーを使用して、色、背景色、ボーダーカラーなどを追加します。

モディファイヤークラスは、複数のバリアントにわたって変更される複数のプロパティまたは値がある場合にのみ使用する必要があります。モディファイヤーは常に必要ではないため、それらを作成する際に、実際に行数を節約し、不必要なオーバーライドを防いでいることを確認してください。モディファイヤーの良い例は、テーマカラークラスとサイズバリアントです。

z-indexスケール

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

コンポーネント要素

• Bootstrapの一部のコンポーネントは、borderプロパティを変更せずに二重ボーダーを防ぐために、重なり合う要素で構築されています。たとえば、ボタングループ、インプットグループ、ページネーションなどです。
• これらのコンポーネントは、0から3までの標準のz-indexスケールを共有します。
• 0はデフォルト（初期値）、1は:hover、2は:active/.active、3は:focusです。
• このアプローチは、ユーザーの優先順位に対する私たちの期待と一致します。要素がフォーカスされている場合、それは表示され、ユーザーの注意を引きます。アクティブな要素は、状態を示すため、2番目に優先度が高くなります。ホバーはユーザーの意図を示すため、3番目に優先度が高いですが、ほぼ何でもホバーできます。

オーバーレイコンポーネント

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

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

詳細については、z-indexレイアウトページをご覧ください。

JSよりもHTMLとCSS

可能な限り、JavaScriptよりもHTMLとCSSを記述することを優先します。一般的に、HTMLとCSSはより多く、さまざまな経験レベルのより多くの人々がアクセスできます。また、HTMLとCSSはJavaScriptよりもブラウザで高速であり、ブラウザは通常、多くの機能を提供します。

この原則は、data属性を使用したファーストクラスのJavaScript APIです。JavaScriptプラグインを使用するためにJavaScriptをほとんど記述する必要はありません。代わりに、HTMLを記述します。詳細については、JavaScriptの概要ページを参照してください。

最後に、私たちのスタイルは、一般的なWeb要素の基本的な動作に基づいて構築されています。可能な限り、ブラウザが提供するものを使用することを優先します。たとえば、ほとんどすべての要素に.btnクラスを適用できますが、ほとんどの要素はセマンティックな値やブラウザ機能を提供しません。そのため、代わりに<button>と<a>を使用します。

これは、より複雑なコンポーネントにも当てはまります。入力の状態に基づいて親要素にクラスを追加してテキストを赤く表示できるようにする独自のフォーム検証プラグインを記述することもできますが、すべてのブラウザが提供する:valid/:invalid擬似要素を使用することを優先します。

ユーティリティ

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

特にカスタムCSSに関しては、ユーティリティは、最も頻繁に繰り返されるプロパティと値のペアを単一のクラスに減らすことで、ファイルサイズの増加に対抗するのに役立ちます。これは、プロジェクトの規模に応じて劇的な効果をもたらす可能性があります。

柔軟なHTML

常に可能とは限りませんが、コンポーネントのHTML要件に過度に独断的にならないように努めています。したがって、CSSセレクターの単一クラスに焦点を当て、直近の子セレクター（>）を避けるように努めています。これにより、実装の柔軟性が向上し、CSSをよりシンプルで特定性が低く保つことができます。

コード規約

Code Guide（Bootstrapの共同作成者である@mdoから）は、Bootstrap全体でHTMLとCSSを記述する方法を文書化しています。一般的なフォーマット、一般的なデフォルト、プロパティと属性の順序などに関するガイドラインを指定しています。

Sass/CSSにおけるこれらの標準およびその他のルールを強制するために、Stylelintを使用しています。独自のStylelint設定はオープンソースであり、他の人が使用および拡張できます。

標準的でセマンティックなHTMLを強制し、一般的なエラーを検出するために、vnu-jarを使用しています。