Vol.3 OOCSS
最近Webのスキルの伸びが遅くなっているような気がしているので、 何か新しいものを積極的にとりいれていきたいです。
といいつつも何か仕事以外で作っているものもない。 Webの記事を読んだり、参考書をよんでいるが実際に何かを作ってみないことには 力がつかないと思うので、インプットに流されないでアウトプットしながら、インプットしていきたいです。
今回はOOCSSの考え方です。
特定の場所でしか利用できないのではなく、場所に関係なく何度も再利用できるように する方法です。共通なものはまとめてパターンとして拡張することで管理性も上がります。
こういったコードがあるとします。
.btn1{
width:300px;
height:80px;
display:inline-block;
border-radius:5px;
border:solid 2px #ccc;
background-color:red;
}
.btn2{
width:300px;
height:80px;
display:inline-block;
border-radius:5px;
border:solid 2px #ccc;
background-color:green;
}
background-color以外は共通しています。
oocssではこう書きます。
.mod-btn{
width:300px;
height:80px;
display:inline-block;
border-radius:5px;
border:solid 2px #ccc;
}
.mod-btn-red{
background-color:red;
}
.mod-btn-green{
background-color:red;
}
マルチクラスで書きます。htmlが少し煩雑にはなりますがメンテナンスしやすい 書き方です。