はてなブックマーク

単純なようで、実はここにはスタイルシートの大事なことが詰まっていると思うんです。というのも、こんなスタイルシートを書くのだって、考えることがいっぱいあるから。 セレクタの名前は .btn なのか、.button なのか ボタンの上下に隙間を指定するのか、高さを指定するのか ボタンの幅は指定するのか、しないのか ブロック要素にするのか、インラインブロック要素にするのか ブラウザのデフォルトのスタイルは影響しないのか？ そんなふうに半分無意識に選択していままでなんとなく書いてきたボタンだけど、みんなどうやって書いてるんだろう。そこで、いくつかの CSS フレームワークのボタンのスタイルシートを読んでみることにしました。 （今回はボタンに関係するスタイルシートだけ抜き出して見ていますが、ブラウザのデフォルトのスタイルをリセットしていたり、抜き出した箇所以外の記述が影響している場合があります。）

スタイルシートを書くのってほんとうにややこしいですね。気がついたら、どこになにが書かれているのかわからない数万行の CSS 地獄になってしまいます。 CSS 地獄にならないためには、例えばボタンなら共通のボタンのスタイルシートに統一して、どのページでも同じスタイルシートでボタンを表現したほうが、効率的だし仕事も早いですよね。デザインのリニューアルだって一瞬です。さらには、デザイナーが作業しなくてもエンジニアだけでボタンを用意できてしまうという CSS 天国が待っています。 CSS 天国を実現するためには、どのような共通のスタイルシートを用意しているのかまとめてあるドキュメント、「スタイルガイド」を用意しておくと便利です。べつに wiki にまとめてもいいんだけど、wiki って更新するの忘れてしまいがち。そこで、スタイルシートに書いたコメントを抽出して自動でスタイルガイドを生成してくれるっ