HTMLタグのクラス名に「btn-primary」ではなく「btn btn-primary」のように指定するのはなぜでしょうか？

Question

最近のCSSフレームワークを使っていると主要なボタンには「btn btn-primary」、警告ボタンには「btn btn-warning」のように指定することが多いと思います。

なぜ、btn-primaryクラスのみを指定するだけで実現させる設計になっていないのでしょうか？

何か理由があると思うのですがご存知のかた教えて下さい。

Answer 1

btnクラスには「ボタンの形」を記述したスタイルが定義されています。
もし、btn-primaryクラスにこの「ボタンの形」のスタイルを直接定義してしまうと、btn-warningやbtn-successなどにも同じスタイルを定義しなければなりません。共通のスタイルが複数箇所に記述されていると、「ボタンの形」を変更したいと思った時にそれぞれのbtn-○○クラスを更新する必要が出てしまい、非効率です。
そのためそれらの共通部分を切り出したのが、btnクラスとなっています。

Answer 2

サイト要素の追加や一部変更など、CSSを書き換える際に、行き当たりばったりでクラス名を付けていると、メンテナンスが難しくなります。そうならないための「コーディング規約（ガイドライン）」として、OOCSS BEM SMACSS FLOCSSなどが提唱されています。

たとえばCSSのコーディング規約のひとつに「OOCSS」というものがあり、それに影響を受けたフレームワークでは質問に書かれているような記法を採る事になると思います。（コーディング規約は多数あるのでOOCSS以外かもしれませんが）

【OOCSSの設計思想を参考にしたコーディングガイドラインを作ってみた - Qiita】
http://qiita.com/lifeyuji/items/e444bb3219a853aa9084#ストラクチャとスキンを分離して記述する例

【[CSS] Object Oriented CSSを学んで綺麗なコードを書く - YoheiM .NET】
http://www.yoheim.net/blog.php?q=20141201

【OOCSS BEM SMACSS FLOCSS 違い 無料 - feb19.jp】
http://feb19.jp/blog/archives/000276.php

【CSSルールまとめ SMACSS. OOCSS. BEM | ホホブクログ】
http://blog.cheekpouch.com/522/