CSSプリプロセッサーの`extend`の悪いところ

「共通するプロパティが上書きされる」が今回の例。

「ルールセット間の暗黙の依存関係」っていうのは、Twitter Bootstrapを例にすると、.btn-primaryや.btn-defaultは.btnと同じ要素に書かないといけないっていうアレ。HTMLの記述まで載った分厚いスタイルガイドが必要なのはこのせいだと思ってる。

危険な継承の例 (Sass):

.foo {
  padding: 10px;
}

.bar {
  @extend .foo;
  font-size: 12px;
}

.foo {
  padding: 0;
}

コンパイル結果:

.foo, .bar {
  padding: 10px;
}

.bar {
  font-size: 12px;
}

.foo, .bar {
   padding: 0; 
}

.fooを.barで継承したけど、どこかで.fooが上書きされたときにそれが.barにも適用されるので意図した結果にならないかもしれない、ってこと。

あと、プレースホルダーセレクタ (%ではじまるやつ) 以外で継承元のルールセットを定義するのは良くない。