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が少し煩雑にはなりますがメンテナンスしやすい 書き方です。