いろいろな書き方が存在するCSS!
まずはおさらいですが、CSSとはHTMLに記載できないページのデザイン要素を書くことができるファイルのことです。
ですがこのCSS、HTML以上にコーダーによって記述方法がバラバラになりがちなのです。
結論から言いますとCSSは「設計」をしっかり行ってサイトごとにブレがなければ、どんな書き方をしてもOKだと思います。
ただし、ソースが無駄に長くなってしまったり、編集がしにくいもの、構文エラーのものはダメですが(笑)
設計さえすればどんなものを書いてもよい、とは言ってもWeb制作会社として”これが最適”というものを定めたいと思いいろいろなCSSを検証してみました!
OOCSS
OOCSS(オーオーシーエスエス)というものがあります。
なんの略かというと(Object Oriented Cascading Style Sheets!)
基本的な考え方としてはレイアウトに関わるCSSと色や大きさに関わるCSSを分けて記載するというもの。
信号というレイアウトを表すCSSと赤、青、黄を表すCSSを別々に書いて、赤の時の信号、青の時の信号、黄色の時の信号を2つのCSSで表すというものです。
さらに、その赤というCSSはポストやリンゴというレイアウトにも使うことができるので便利!
といった感じです。
ですが、デメリットとしてCSSを見ただけでどの部分のCSSなのかが分かりにくく、メンテナンスの時に担当が変わったなどの時に煩雑になりがちです。
これだと、メンテナンスにも強い弊社のフォーマットとしては微妙、、、
SMACSSとBEM
SMACSS(スマックス)というもの、BEM(ベム)というものがあります。
それぞれの略は
・Scalable and Modular Architecture for CSS
・MindBEMding
だそうです。
なんだか難しい単語が並んでいますが、SMACSSというCSSはOOCSSとは違ってベース、レイアウト、モジュール、状態、テーマという要素にCSSを分けて、メンテナンス性を高めたものです。
BEMはさらにクラス名をさらに分かりやすく、人にやさしい命名ルールにしたものです。
欠点としては定義する名前が長くなりがち。
でも人には分かりやすくメンテナンスに強そう!
これ以外にも世の中にはいろいろなCSSのフォーマットが存在していて、
どのCSSもメリットとデメリットがありますが、どの開発者も自分のCSSが一番!
って思っているでしょう(笑)
では何が一番良いのか!作ってしまえ!
では何が一番良いCSSなのか?と考えた時にWeb制作会社としてメンテナンス性が高くて汎用性もそれなりにあって、
検索エンジンも優しいCSSフォーマットを作ることにしました!
そして現在、誠意制作中になります。
次回のコラム(もしくはその次、、)で発表できるように進めていこうと思います!