これでいいのかOOCSS

oocss.markdown

• Aというオブジェクトがある
• Aとは一部だけちがうA-dashがある

パターン1の書き方

オブジェクト指向じゃない

CSS

.A{
 width:100px;
}
.A-dash{
 width:100px;
 color:red;
}

HTML

<div class="A">hoge</div>
<div class="A-dash">hoge</div>

　

パターン2の書き方

オブジェクト指向的。
HTMLのclassにはどちらも同じAを指定することで継承を明示している。

CSS

.A{
 width:100px;
}
.dash{
 color:red;
}

HTML

<div class="A"></div>
<div class="A dash"></div>

　

パターン3の書き方

オブジェクト指向とは言いがたい。
AとA-dashの同じプロパティがグループ化されているが、
継承が明示されているわけではない。

継承の意味でグループ化をしていたとしても
Aとは継承関係にないが、たまたま同じプロパティを持った「X」というオブジェクトが出てきた場合、
Xもグループ化できてしまう。

CSS

.A,
.A-dash{
 width:100px;
}

.A-dash{
 color:red;
}

HTML

<div class="A"></div>
<div class="A-dash"></div>

パターン4の書き方

オブジェクト指向的。
CSSはパターン3と同じだが、
sassのextendによりAの継承が明示されている

CSS

.A,
.A-dash{
 width:100px;
}

.A-dash{
 color:red;
}

Sass

.A{
 width:100px;
}

.A-dash{
  @extend .A;
  color:red;
}

HTML

<div class="A"></div>
<div class="A-dash"></div>