一番良いCSSってなんだ!?│東京のWeb制作会社のCSS関連コラム

Columnコラム

Web制作

一番良いCSSってなんだ!?

一番良いCSSってなんだ!?

2015/04/07
このエントリーをはてなブックマークに追加

こんにちは年末年始のリバウンドが、ようやく元に戻ったコーダーの須澤です!

年末年始に増えた体重が、ようやく元に戻りスタートラインに立つことができました。

昨年は過去最重量体重を記録し、そこから6Kg落ちたのが年末。

年末の体重から果たして今の生活で体重を減らし続ける事ができるのか?

おそらく難しいでしょう、、、

やはり運動も加えないと難しいと思うので、少しずつ生活を変えていこうと思います!

いろいろな書き方が存在する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_15040301.jpg

では何が一番良いのか!作ってしまえ!

では何が一番良いCSSなのか?と考えた時にWeb制作会社としてメンテナンス性が高くて汎用性もそれなりにあって、
検索エンジンも優しいCSSフォーマットを作ることにしました!
そして現在、誠意制作中になります。

次回のコラム(もしくはその次、、)で発表できるように進めていこうと思います!

css_15040302.jpg

関連するサービス

ホームページ制作

text_totop