OOCSS(オブジェクト指向CSS)は、見た目に関する機能をオブジェクトとして、人が管理、メンテナンスしやすい設計をする考え方。
コードの再利用性も高くなる。
クラスに機能を分けて設定することで、css自体を変更することなく、cssの組み合わせ見た目を変更することができる。
ただ、覚えてないと以下のような状態になる。スタイルガイドを用意すれば確認しやすいが、忙しい業務の中、スタイルガイドを最新に保つのがむずかしい。
- どのクラス名がどんな見た目になるのか分からない
- どんなクラス名が用意してあるかcssを読まないといけない
ボタン
ボタン
.btn {
width: 50px;
height: 30px;
background: #ccc;
}
.send {background: #d00;}
.link {background: #00d;}
.big {width: 70px;}
.small {width: 30px;}
