Posted at

OOCSSについて調べた

More than 1 year has passed since last update.


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で書いていればなんとかなりそう。


 参考