【Web開発】OOCSSを考慮したモジュールを作ってみる
こんにちは！
皆さんはウェブサイトを作る際にきちんとOOCSS（オブジェクティブなCSS）を考慮して作っていますか？
「プログラミングでもあるまいし、そんなの関係ねーよ」「形ができればいいんだろ？」と思った人もいるかもしれませんが、CSSでもオブジェクト指向を考慮しないと改修の際にめんどくさいことになるかもしれません！
では、オブジェクト指向を考慮したCSSを組み立てるにはどうすればいいのか、考えていきましょう♪
●オブジェクト指向にすることでのメリット
OOCSSを理解する上で、もっとも学習の手助けになるのはそのメリットを知ることだと思います。（自分がそうでした）
まずは、ボタンのを作ることを考えます。
↓のようなやつですね。
これに加えて今度は↓のようなアコーディオンボタンを作るとします。
この2つの見た目の差は「アイコン」と「色」となります。
つまり、そのほかは共通で使えることになります。（paddingとかfont-sizeとかとか）
その辺をまとめちゃおう！というのがOOCSSの考え方です。
●実際にコードを書いてみた
実際にコードを書いてみましたのでこちらで解説していきます。
共通部分のコードを見ると「btn_link」のクラスが共通になっています。
そして、「btn_blue」「btn_red」「btn_green」が色を決定するクラスになります。
リンクボタンのコードを見てみると「type1」がアイコンを”＞”にするクラスになります。
アコーディオンのコードを見てみると「accordion」がアイコンを”＋”にするクラスになります。
仮に、”＞”アイコンから”＋”アイコンに変更したいとした場合、（なかなかなさそうな変更ですが笑）「type1」を「accordion」に変えればOKです！
さらに新たにリンクボタンを作る際には、アイコンだけを作ればいいのでかなり楽になります♪
●まとめ
・共通で使える部分は一緒にしちゃおう！
・アイコンや色など異なる部分のみ専用のクラスを使おう！
・OOCSSを使うと無駄なコーディング（作業）が減ります！
