アプローチ Approach

はじめにのページではプロジェクトとその提供内容の紹介ツアーを提供していますが、このドキュメントでは 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 のような修飾子を使用して、color、background-color、border-color などを追加します。

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

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 をどのように書くかを文書化しています。一般的なフォーマット、常識的なデフォルト、プロパティと属性の順序などのガイドラインを指定しています。

Stylelint を使用して、Sass/CSS でこれらの基準などを実施しています。カスタム Stylelint 設定はオープンソースであり、他の人が使用および拡張できます。

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