大手サイトの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点