ツイッターで話しているうちにOOCSSが良く分からなくなってしまいました／(^o^)＼

再確認の意味でエントリーに起こしてみます。

OOCSSって何？

「Object Oriented CSS」の略で意味は「オブジェクト指向CSS」です。

オブジェクト指向について詳しく説明するのは難しいのですが、要は「バラバラに作っておいて使いたいときに組合せればよくね？」という考え方（だと思う）です。

jQuery等のライブラリを利用するシーンをご想像いただけると分かりやすいと思います。

OOCSSは分かりにくい？

今回調べてみたところ「OOCSSは分かりにくい」という意見が見受けられました。

お客様（運用者）から別段そのような話を伺ったこともなかったので、
私なりに考えみて以下の2点がその要因では？と推測しました。

  • classの名前が分かりづらく、何をするものか分からない。
  • classが複数付くためため、どのclassが何をするものか分からない。

どちらも管理運用をしっかりと考えた上で作成されていれば、あまり問題にはならないでしょう。

他にも「これが分かりづらい」という点がありましたら、ぜひ教えてください。

OOCSSは1つのサイトで終わらない

私が感じているOOCSSの良さは、その再生産性にあります。

ここでいう再生産性とは、1つのサイトに限らず、使用したパーツを別のサイトでも使用することが出来る、ということを示しています。

つまり、いくつものサイトを制作することで、これまで作成してきたものを活かし、より効率のいいコーディングが可能になるのです。

知らず知らずのうちに使ってるかも？

ツイッターで話しているときに「そもそも私のCSSってOOCSSなの？」と疑問に思いました。

私がOOCSSという言葉を知ったのは1～2年くらい前だと思いますが、当時も「私の書き方はこれなのかな」程度のものでした。

私は経験上ベターと思える方法を選択してきた結果、今のような書き方をしています。

しかし、これが最終型というわけではなく、今後も取捨選択の中で自然と変わっていくでしょう。

明確なルールなどもありませんし、知らずに使っているものであれば、最初から特に意識する必要もなかったのかもしれません。

今回のエントリーを書くにあたり参考にさせていただいた記事です。

とても勉強になりました。

多分ツッコミみどころ満載なこと書いていると思うので、皆さんのご意見・反論などビシバシぶつけてやってください。

最後までご覧いただきありがとうございました!!