大手サイトのCSSを見る試み

前提

ISPやらポータルやらのトップページに書いてあるCSSを見てみる。

  • キレイなCSSコーディングかどうか
    • metaタグでCSSソース指定があるのにHTMLにも書いてあると減点(-1)
    • 同じ定義が複数あると減点(-1)
    • コーディングスタイル(インデント,スペーシング)の統一感がないと減点(-1)
    • 定義の記述順序に一貫性がないと減点(-1)
    • 無意味なコメントがあると減点(-1)
  • HTMLソースにCSS意味ナシなことがないか
    • 色指定がcolorとかbgcolorで書いてあると減点(-1)
    • 表でもないのにテーブルと減点(-1)

上記それぞれで×なら-1点、最大-7点、10点からの減点方式で残りの3点は完全に俺の主観。
俺の主観は基本的にCSS至上という立場で採点。CSSの思想的側面(HTMLには構造、見栄えはCSSを等)も重視します。評価は記法のみを対象にし、コンテンツそのものは評価の対象としません。
とはいえ、評価項目の取捨選択もやっていなければ、明確な減点理由もないので、何をとってもいい加減なもんです。

目的

このいい加減な採点を通して、それぞれのサイト構成の特徴をあぶりだせたら良いなぁ。決して取り上げたサイトの優劣を示したいわけじゃないです。あしからず。

Yahoo! JAPAN

俺の感覚だとCSSは外部ファイルに置くもの、なんだけど、ここはソースにベタ書き。読みにくいったらない。でもこれはYahoo!JAPANのサーバ環境も多分に関連するところ。HEADリクエストを送ってもContent-bodyも返すYahoo!さんですから、何か考えがあっての事でしょう。
評価:同じ定義が複数あって、統一感がなくて、無意味なコメントがあって、HTMLに色指定があって、表でもないテーブルがあるから5点減点。なんだか見難いソースなので、俺の主観評価は2点。
結果:4点

mixi

トップページというとログイン画面だからいたってシンプル。CSSの内容もとてもシンプル。
評価:CSSの記法が統一されてない以外にCSSは変でない。HTMLソースに色指定があり、サイト構成をテーブルで組んであるので計3点減点。それってつまりあんまりCSSを使ったサイト構成をしてないってことじゃん、俺主観評価0点。
結果:4点

これってけっこう時間かかるね。続きはまたそのうち。