GitHub で表示

アプローチ

Bootstrap の構築と保守に使用されている指針、戦略、および技術について説明します。これにより、ユーザー自身でより簡単にカスタマイズおよび拡張することができます。

はじめにのページでは、プロジェクトの概要と提供される機能を紹介していますが、このドキュメントでは、Bootstrap で「なぜ」そうするのかに焦点を当てています。ウェブ開発における私たちの哲学を説明することで、他の人が私たちから学び、私たちと一緒に貢献し、私たちを改善する手助けをしてくれることを願っています。

何かおかしい点や改善できる点があれば、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` です。`display`、`padding`、`border-width` などの共通スタイルには `.btn` を使用します。次に、`.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 を使用しています。