NZサイト を作ったときの css コーディングの覚え書きというか、メモというか。

ちと、今回は、セレクタの階層をなるべく浅くやってみようというポリシーで作ってます。なので、ほとんどクラス名のみ。
このやり方で書くのは正直めんどくさい。 自分のサイトだからやってみたけど、仕事ではしないと思います。

ul.hoge > li とかやったほうが絶対楽なのはわかってんですけど、パフォーマンスに影響する とか、yahoo どっかで見た気がして、やってみようかと。

(とか思ったら、そんなに効果は無いっぽい？ CSSセレクタのパフォーマンスへの影響)

クラス名のみでやってると、当然ながら html のタグが変わっても多少粘れるっていうのはあるかも。
ま、div と span とっかえて、display 指定が無かった場合なんかは壊れますが。

あと、class 名のつけかた。相変わらずいきあたりばったりでつけているので、一貫性が無い。これはなんとかしたい。
やっぱり最後に整理しないといかん。

今回は less を使いました。コーディング時はファイルを分割して書き、プレビューするときに 1 つの css にまとめて表示させるようにしています。手動じゃやってられんので当然自動で。

今のところ、ちと気になる点が2つほどあって、
・less ファイル(cssも?)のプロパティの値を改行するとパースエラーになっちゃって、グラデーションの指定をするときに見辛くて大変困る。
・複数セレクタを指定しているとき、セレクタに疑似クラスが入っていると、レンダリング時に分割されてしまう。同じ指定がいくつもあるので無駄。

でも、 変数が使えたり計算できたりするのはかなり便利。-moz-hogehoge と -webkit-hogehoge をまとめたりするときに重宝してます。

デザインが落ち着いて、整理し始めたら、プロパティ別整理法っぽいこともやっています。
font-size とかフォント色・背景色とか。

/* font-size 12px がデフォ */
/* font-size: 9px */
.photo_info_title,
.exif_key
{
  font-size: 9px;
}

/* font-size 10px */
.header_navi,
.no_map,
.index_top_navi_item_ja,
.nogps,
.photo_section_title
{
  font-size: 10px;
}

/* font-size 18px */
.page_title,
.photo_title
{
  font-size: 18px;
}

これで、新しいクラスのフォントサイズを 10px にしたいなーって時には、10px んとこにクラス名を追加すると。制作も後のほうになってくると、他のクラスとの整合性なんかが気になってくるので、個人的にはこっちが好きです。が、プロパティ別なものと、クラス別なもの両方あったりするので、自分しか理解不能ってのはあるかも。そんなときの Firebug でw。

あと、同じ見た目にしたいけど、クラス名は同じにならんよなぁ〜っていう時にもこの方法でやってます。
class="hogehoge shadow1"
class=”shadow1″ なんて class=”red” と同じじゃん って感じなんで、やりたくない。けど、同じ影のプロパティつけたいし、後で変更するかもしれないし・・・ ってとき。

/* ボタン用シャドウ */
.footer_pagetop_link:hover,
.index_top_navi_item_link:hover,
.photo_prev_footer_link:hover,
.photo_next_footer_link:hover
{
  .box-shadow(0, 1px, 5px, rgba(0,0,0,0.3)); // .box-shadow を別のところで定義してます。
}

とか。

コメントを書いとかないと、何やってんだかわかんなくなるので、この部分に関してはなるべくコメント書くようにしてます。

ちょっとめんどくさいのは、セレクタの一番下のものにコンマをつけるとエラーになる （ま、そうですな) ので、一番したのものを消すときに行削除だけじゃすまないこと。 たまに忘れるんです。上の行のコンマ消すの。