Twitter Bootstrapはボタンに複数のクラスを必要とするのはなぜですか？

Question

Twitter's Bootstrap libraryを使用してプライマリボタンを作成するには、class="btn btn-primary"のような2つのCSSクラスを使用する必要があります。

なぜこのようにAPIを設計したのですか？btn-primaryには、btnに含まれるすべてのCSSが含まれていましたか？純粋にコードの重複とファイルサイズを節約するのか、それとももっと複雑な理由がありますか？

Answer 1

これはOOCSSの原則によるものです。要素から特定のスタイルを切り離すことで、コードとスタイルの再利用が向上し、CSS内のオブジェクトをすばやく簡単に変更できるようになります。たとえば、.btnクラスではボタンにデフォルトの灰色のスタイルを設定しているため、.btnクラスのすべてのボタンは同じスタイルになりますが、あらかじめ定義されたスタイルで、同じボタンクラスを拡張して、デフォルトの.btnプロパティを何度も繰り返し書く必要があります。 .btn-warningと他のすべてのボタンステートクラスのCSSを見ると、ボタンの色とスタイルを定義するだけで、ボタンクラスをもう一度書き直す必要はありません。

.btn-warning:hover, .btn-warning:active, .btn-warning.active, .btn-warning.disabled, .btn-warning[disabled] { 
    background-color: #F89406; 
} 

これにより、読みやすく、短く、よりクリーンなスタイルシートが可能になります。

Answer 2

btn-primaryはデフォルトのボタンではないためです。 btn-successが緑色に変わるような青色に変わるCSSです。

デフォルトのボタンは灰色です。