アプローチ

Bootstrap の構築, 保守, テクニックについて学び, より簡単に拡張・カスタマイズできるようにしましょう。

ここでは Bootstrap で何をするのかにフォーカスします。他の人たちが私たちから学び, 共に貢献し, 改善するために Web 上に構築するという私たちの哲学について説明します。

正しいとは言えませんが, 改善する余地があるかもしれません。イシューを立ててください, 私たちは議論するのが大好きです。

サマリー

これらについて深く掘り下げていきます。

コンポーネントはレスポンシブでモバイルファーストでなければなりません
コンポーネントは基本クラスで構築し, 修飾クラスを使って拡張する必要があります
コンポーネントの状態は, 共通の z-index に従う必要があります
可能な限り, JavaScript よりも HTML と CSS の実装が好ましいです
可能な限り, カスタムスタイルよりもユーティリティを使用してください
可能な限り, 厳密な CSS セレクタ(子供セレクタ)を避けてください

レスポンシブ

Bootstrap レスポンシブスタイルは モバイルファースト で作られています。すべてのコンポーネントが完全にレスポンシブではありませんが, このアプローチは viewport が大きくなるにつれてスタイルを追加することで CSS の上書きを減らすことができます。

ほとんどの場合, 特定のブレイクポイントで適用され, 次のブレイクポイントまでは min-width を維持します。例えば .d-none は全てのブレイクポイントに適用されます。一方, .d-md-none は中ぐらいのブレイクポイント以降に適用されます。

コンポーネントが複雑な場合は, max-width を使用することがあります。時にこれらの上書きは, コンポーネントのコア部分を書き換えるよりも機能的にも精神的にもサポートしやすいです。私たちはこのアプローチを控えていますが, 時々使用します。

クラス

ブラウザやデバイス間のレンダリング差異を吸収するための Reboot を除き, すべてのスタイルはクラスをセレクタとして使用することを目指しています。これは, 型セレクタ (例 input[type="text"]) と余分な親クラス (例 .parent .child) が簡単に上書きされないようにするためです。

そのため, コンポーネントは上書きされないように共通のプロパティを持っている基本クラスを組み合わせる必要があります。例えば .btn と .btn-primary です。display, padding, border-width などの全ての共通スタイルに .btn を使用します。次に .btn-primary のような修飾クラスで, テキスト色, 背景色, 境界線の色などを追加します。

修飾クラスは, 必要なときだけ使用してください。修飾の良い例は, テーマカラーとサイズのバリエーションです。

z-index

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

コンポーネント

いくつかのコンポーネントでは境界線が重複しないように, ネストした構造で構築されています。例えば, button groups, input groups, pagination
これらのコンポーネントの z-index は 0 から 3 です。
0 は標準(初期), 1 は :hover, 2 は :active/.active, そして, 3 is :focus
このアプローチは, ユーザーの優先度に一致します。要素がフォーカスされている場合, その要素は表示され, ユーザーの注目しています。アクティブな要素は状態を示すので2番目に高いです。ホバーはユーザーの意図を示しているため 3番目ですが, ほとんどすべてのものがホバーできます。

オーバーレイ

Bootstrap には, オーバーレイとして機能するいくつかのコンポーネントが含まれています。z-index の高い順では, dropdowns, sticky navbars, modals, tooltips, popovers になります。これらのコンポーネントには 1000 から始まる独自の z-index があります。この開始数に意味はありませんがバッファとして機能します。

各オーバーレイは, 共通の UI ルールにより, ユーザーがフォーカスした要素またはホバリングされた要素を常に表示できるように z-index をわずかに増やします。たとえば modal はドキュメントをブロックします（モーダルのアクションのために他のアクションはできません）。そのため, navbars よりも前面に配置します。

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

JS 上の HTML/CSS

可能な限り, JavaScript よりも HTML/CSS で実現することを好みます。一般的に HTML/CSS のほうが多くの人にとってアクセスしやすくなります。HTML/CSS は JavaScript よりもブラウザで早く表示され, 多くの機能を提供することができます。

JavaScript API はデータ属性を使うことを原則としています。JavaScript プラグインを使用するには, ほとんどの場合, JavaScript の記述は必要ありません。代わりに HTML を記述します。詳しくは our JavaScript overview page を参照してください。

最後に, 私たちのスタイルは一般的な Web 要素の振る舞いに基づいています。可能であれば, ブラウザの提供するものを使用するこをお勧めします。例えば, .btn はほとんどの要素に追加することができますが, ほとんどの要素はセマンティックな意味やブラウザが提供する機能を持ちません。その代わりに <button> や <a> を使います。

複雑なコンポーネントも同じです。入力状態に基づいて親要素にクラスを追加する独自のフォームバリデータを作成することもできますが, ブラウザの :valid/:invalid 疑似要素を使用することをお勧めします。

ユーティリティ

Bootstrap3 以前からあるユーティリティクラスは, CSS 肥大化とパフォーマンス低下を防ぐ強力な味方です。ユーティリティクラスはプロパティとプロパティ値をペアとしたクラス名 (例 .d-block = display: block;) で表現します。CSS を省略できるのでマークアップのスピードが早くなります。

最も頻繁に繰り返されるプロパティ値ペアを単一のクラスに減らすことにより, ファイルサイズの増加に対処するのに役立ちます。これは, プロジェクトのスケールで劇的な効果をもたらすことができます。

フレキシブルな HTML

常に可能ではありませんが, 私たちはコンポーネントの HTML 要件では独断的ではないように努めています。したがって, 私たちは CSS セレクタの単一のクラスに焦点を当て, 直接の子セレクタ (>) を避けようとします。これにより, 実装の柔軟性が向上し CSS の簡素化と特定性の低下を防ぐことができます。