CSS Tips:コメントアウト

ふつー、CSSのコメントは

/* */、もしくは <!– –>で囲う。(W3C:Comments)

が、しかしだ、こんな方法で行う事もできる。

A trick I use all the time to temporarily disable a style attribute involves simply adding an ‘x’ in front of the attribute name. It’s safer then cutting and quicker then commenting out:


1
2
3
4
5
6
7
#footer{

 border-top: 1px solid #e5e5e5;

 xborder-bottom: 1px solid #e5e5e5;

 }
Squeaky Clean CSS

border-bottom属性をコメントアウトするのに、先頭に’x'を付けている。なるほど、文法が間違っているわけでは無いから、こういう方法もあるのか。知らない人が見たらコメントだとも思えないのが欠点だけど、作業中のスピードアップが計れるのが良い所。

実際に仕事で使うとしたら、リリースする時に実行するスクリプトというのを作って、自動で’x'が先頭に付いた属性を削除するべきかな。これをそのまま納品するのは避けないと。納品前にはlintで文法チェックしすべし。(Webアプリケーションではみんなどうしているんだろう、ふと疑問に思った。)

Squeaky Clean CSSでは他のTipsもあって、CSSを見やすくするためのグループ化、インデントで見やすくする、<div>タグを閉じる方にid名をコメントで記述する等、ありがちではあるけど大事な事ばかり。インデントのスタイルに関してはそれぞれポリシーもあるだろうけど、書いた人の考えが出てくる部分でもあるので、結構他人の書き方は参考になる。

CSSセレクタの指定が重なる時に優先されるのは?

Squeaky Clean CSSからリンクされていた、他のページにも面白い記事があった。CSSではidやclass、タグを指定(セレクタと呼ばれる機能)して、色や大きさ等の属性を設定するのだが。指定が重なった時には何が優先されるのかを、この記事では解説してた。しかもスターウォーズに例えて!

Join me, and together we can rule the galaxy as father and geeks!

内容はともかく、話のたとえでスターウォーズの画像を作って掲載されているので。まずはそちらをチェック。

一応自分のために内容を要約しておくけど。このページによればCSSのセレクタのそれぞれを、idは1、classは10、タグは100と考えて、それぞれを足した数の大きい方が優先されるのだとか。タグの指定が一番強力という事になる。

しかしこの記事のコメントを見て行くと、どうもこれは正確な話では無いらしい。あんまり沢山書いてあってとても読んでいられなかったけど、タグ>class>idという関係があるんだな〜という程度を知っていれば、とりあえずは十分かと。

きちんと知りたい人は、迷わずhttp://www.w3.org/へ!