OOCSS(オブジェクト指向CSS)についてメモ

OOCSS(オブジェクト指向CSS)は、見た目に関する機能をオブジェクトとして、人が管理、メンテナンスしやすい設計をする考え方。
コードの再利用性も高くなる。

クラスに機能を分けて設定することで、css自体を変更することなく、cssの組み合わせ見た目を変更することができる。





ただ、覚えてないと以下のような状態になる。スタイルガイドを用意すれば確認しやすいが、忙しい業務の中、スタイルガイドを最新に保つのがむずかしい。

- どのクラス名がどんな見た目になるのか分からない
- どんなクラス名が用意してあるかcssを読まないといけない

ボタン
ボタン

.btn {
  width: 50px;
  height: 30px;
  background: #ccc;
}
.send {background: #d00;}
.link {background: #00d;}

.big {width: 70px;}
.small {width: 30px;}