OOCSSとは
object oriented CSSの略。
BEMの実例を調べようとしたらairbnbのGitHubに名前を見かけたので調べた。
何やら原則があるらしい。
原則1 再利用できるようにする
転載元
https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/
before
#button {
width: 200px;
height: 50px;
padding: 10px;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#widget {
width: 500px;
min-height: 200px;
overflow: auto;
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
after
.button {
width: 200px;
height: 50px;
}
.widget {
width: 500px;
min-height: 200px;
overflow: auto;
}
.skin {
border: solid 1px #ccc;
background: linear-gradient(#ccc, #222);
box-shadow: rgba(0, 0, 0, .5) 2px 2px 5px;
}
#buttonと#widgetに指定している共通のCSSを抜き出している。
まぁそうだよね、って感じ。
原則2
飽きたので調べるのやめ。
だいたいSassで書いていればなんとかなりそう。