THE HAM MEDIA BLOG

気が狂うようにならないで、よく構造化されたCSSファイルの書き方

Clip to Evernote このエントリーをはてなブックマークに追加
カテゴリ:
CSS
タグ:
CSS
スタイルシート
woork: Write a well structured CSS file without becoming crazy
well-structured-css.jpg

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

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

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



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

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


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

1、シンプルに
2、「上品なコード」指向で
3、秩序だてて

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

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

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

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

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



・まず作り始める前に、手書きで、
 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も複雑に書かず、
よりシンプルにして書こうと思う。



この記事へのコメント
コメントを書く
お名前: [必須入力]

メールアドレス: [必須入力]

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック

トップに戻る

×

この広告は180日以上新しい記事の投稿がないブログに表示されております。