Help us understand the problem. What is going on with this article?

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

 参考

tarunama
tabian
画像認識技術を用いて、新しいポスター体験を提供する「ポ写」を開発している全員副業のスタートアップです! エンジニアが自由に、でも真面目に技術に向き合える環境、それは最新技術にとことんこだわれることだと思って日々Qiitaの更新頑張ってます。
https://tabian.co.jp
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away