THE HAM MEDIA BLOG

woork: Write a well structured CSS file without becoming crazy


CSSって、気づいたら膨大な量を指定している時があります。
それはまだまだ自分が未熟な証拠でもあるのですが、

「いかによく構造化されたCSSファイルを書くか」

というような記事があったので、読んでまとめてみました。

英語なので、かなり意訳になりながらも読んでみました。
間違いがあるのならご指摘ください。

基本となる３つのポイント

まず、作業を最適化するために以下のような
簡単な規則をもてということ。

１、シンプルに
２、「上品なコード」指向で
３、秩序だてて

１は、たくさん書くと複雑化するから簡単にしようとのこと。

２は、インデントや余白とコメントを使用して、
コードを論理的に別けようということ。

３は、#left-columnや#footerなど、プロジェクト内のすべての部分で
同じ名前のidを指定しようということ。
また、CSSプロパティはアルファベット順で書いて
読みやすくしようということ。
そして、一度秩序だてた方法をみつけられたら、
それを再利用して使っていこうということ。

全体のポイントはこの３つのようだ。

以下要点を箇条書きしておく

・まず作り始める前に、手書きで、
　idやエレメント、paddingやborderなど書いていく。
　
・標準的なHTMLのスタイルをリセットする。
　筆者にとって共通している要素は
　body, h1, h2, h3, p, ul, li, formの要素で
　これらをリセットしているらしい。
　他は何もしないようだ。
　場合によってはCSSリセットテクニックを利用する（Yahoo UIなど）
　
・同じid内のすべての要素は、インデントをつけて書く。
　こんな感じに↓

#column-left{
	○○○
}
	#column-left h1{
		○○○
	}
	#column-left p{
		○○○
	}

・すべての部分で適応できるclassがある場合、
　最後にまとめておく。
　

ここにまとめたのは、伝えるべきだと思った要点についてで、
他にも書いてあったことがあるのですが、
それらは省略します。

詳しくは原文を読んでください（英語ですが。。。）

英語が読めなくても、いくつかのことは
キャプチャ画像として載っているので、
それを見るだけでも行ってみてください。

woork: Write a well structured CSS file without becoming crazy

描写的なクラスネーム

この筆者の面白いと思うべき点は、
描写的なクラスをあえて書くところだと思う。
描写的や視覚的な名前は、日本の正しい書き方としては
ダメだといわれる事のほうが多い。

しかし、全体に適応できるようなclassであれば、
描写的な名前でもいいような気がする。

ただし、作り直すときや、修正の時に、
.redとつけていた赤くした要素の中身が
青に変更されてしまたというような場合など、
名前とは違うようなことにもなりかねないので、
やはり描写的なクラスネームは避けたほうが無難かな。

一番は、シンプルに！ということ

HTMLもCSSもシンプルにするのが一番！
ということなのだろうけど、
そのシンプルにする方法は人それぞれだろうが、
ある程度はそろえたほうがいい。

僕も今回のこのエントリーで、
自分のCSSの書き方を、再度見直してみようと思う。
そして、HTMLも複雑に書かず、
よりシンプルにして書こうと思う。