細かすぎて伝わらないCSSのコダワリ選手権

#書き方のコダワリ色々
個人的にコダワリを持って書いてるけど、細かすぎて意図が伝わらないことが多いCSSの書き方についてピックアップしました。
それぞれプロパティごとに解説をしていきたいと思います。

##font
###ポイント

• font-size
• line-height
• font-family

上記はこのようにまとめて書くことが可能。

css

font: 0.875em/1.6 Meiryo, 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;

が、上記は以下のような指定をするのと同じになるので

css

font-size: 0.875em;
line-height: 1.6;
font-family: Meiryo, 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;
font-style: normal;
font-variant: normal;
font-weight: normal;

扱いに注意が必要。
（指定していないfont-style,font-variant,font-weightにも初期値が割り当てられているため、コンテンツ内で使う場合は想定していないリセットが起こる可能性があることに十分に気をつける）

###得られるもの
見た感じスッキリする。文字数削減。

##font-size
####ポイント
ベースとなるフォントサイズ（root要素に指定するフォントサイズ）はemで指定する。

css

font: 0.875em/1.6 Meiryo, 'Hiragino Kaku Gothic ProN', 'MS PGothic', sans-serif;

何故、emで指定するのかについては、こちらの記事で詳しい解説をしています。

###得られるもの
ユーザビリティ。

##font-weight
####ポイント
normal,boldじゃなく
400,700のように数値を使う。

css

font-weight: 700;

###得られるもの
文字数削減。

##color
####ポイント
カラーコードが省略可能な場合は3桁で記述する。

css

color: #ccc;

###得られるもの
文字数削減。（滅多になくなりましたがガラケー対応が必須のときは、キャリアによってバグがあるので6桁で記述しましょう）

##background-position
###ポイント
left,right,top,bottom,centerじゃなく
0,100%のように最初から数値を使う

css

background-position: 100% 50%;

###得られるもの
文字数削減。
Firebug等で数字を増減させるだけで、すぐに位置調整が出来る。

ちなみにcss3で拡張されたbackground-positionで、
右や下基準で配置する場合、数値指定だとダメですが、

css

background-position: right 20px center;
background-position: 100% 20px 50%; /* コレだと動作しない */

対応ブラウザ：Cr 25+, FF 13+, IE 9+, Op 10.5+, Sf6+

css

background-position: calc(100% - 20px) 50%;

対応ブラウザ：Cr 19+, FF 4+, IE 9+, Op 15+, Sf6+, An4.4+（ベンダープレフィクス付きの場合）

このようにcalcを利用した指定をすれば同じことが可能です。
動作するブラウザもcalcを利用した書き方のほうが微妙に多い。（ベンダープレフィクスなしの場合は同程度）

##margin

###ポイント
要素間の上下marginは上方向に統一して指定する。
何故、上方向に取るほうが最適なのかについては、こちらの記事で詳しい解説をしています。

css

ul > li { margin-top: 12px; }
ul > li:first-child { margin-top: 0; }

:first-childは特殊な例を除きIE7から対応しているが、

css

ul > li { margin-bottom: 12px; }
ul > li:last-child { margin-bottom: 0; }

:last-childはIE9からの対応となる

###得られるもの
メンテナンス性、ブラウザ対応度

##display:table-cell;
IE8に対応した縦横中央揃え実現に便利なdisplay:table-cell;だが、なるべく使わない。
理由として、display:table-cell;は行を改める場合にdisplay:table-row要素
（もしくはdisplay:table;で仕切りなおすか）が必須なので、
デバイス対応で必要となる柔軟なレイアウト性に欠ける。
また、display:table-cell;の要素にはmin-heightが効かない。（代替手段もあるが、それを利用すると肝心のvartical-alignが該当要素で効かなくなる。）

###ポイント
display:inline-block;と擬似要素を利用した縦横中央揃えを使用する。

上記の場合にネックとなる個々にheightが異なるケースには高さを揃えるプラグインで対応する。

IE10以上の対応となる場合はdisplay:flexbox;でも対応可。（ベンダープレフィクス必須、IE11以降はdisplay:flex;）

###得られるもの
メンテナンス性、デバイス対応での柔軟なレイアウト

##text-indext:-9999px;（代替案考察）
上記は画像置換でよく使われる手法だが、レンダリングのパフォーマンス面やキーボードフォーカス時の点線などが問題になることがある。

###ポイント

代替案としては2つあるが、後者を使うことが多い。

css

.hide-text {
    height:20px;
    width:120px;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    background: url("/images/xxxx.jpg") 0 0 no-repeat;
}

こちらのコードの場合、text-indent: 100%;でテキストを右方向に吹っ飛ばす。
以前採用してみたところ、レガシィブラウザでレンダリングが上手くいかないケースがあった。
hasLayout関連かと思ったが、zoom:1;でも解決出来ず。
（レイアウトによっては、上手くいく場合もあったので結局よくわからず）

css

.hide-text {
    height:0px;
    width:120px;
    padding-top:20px;
    overflow: hidden;
    line-height: 10;
    background: url("/images/xxxx.jpg") 0 0 no-repeat;
}

こちらのコードの場合、line-heightでテキストを下方向に吹っ飛ばす。
高さを0pxにして、画像表示分をpadding-topで確保するのがポイント。
IE6,IE7等でも全く問題なし。

###得られるもの
パフォーマンス、ユーザビリティを損ねることなく画像置換を実現

##Grid System
###ポイント

960pxのグリッドシステムなど、特定の数値のグリッドシステムに依存しないようにする。
理由としては、

• デザイナーがいつも一定のクオリティで仕上げてくれるとは限らない。
• どのような案件においても同様の画面幅が最適とは限らない。
• また、こちら記事ではデザイナーAndy Clarke氏のグリッドデザインに対する見解を次のように説明しています。

本来のグリッドデザインとは、「コンテンツに合わせて最適なグリッドを自分で設計すること」

グリッドシステムには「コラム」と「ガーター」があり、それに沿ってデザインパーツを配置するだけという考え方が多いかもしれないが、そうではない。コンテンツに合わせて都度グリッドを設計するのが正しい手法とのこと。

うーむ、確かにそうかも...
では、コンテンツに最適な幅としてデザインされたグリッドを自分で設計するにはどうしたらよいのか？
グリッドシステムを自作出来るようにすれば解決。例えばこんなのあるよ(｀・ω・´)

neat
http://neat.bourbon.io/

susy
http://susy.oddbird.net/

ちなみに普段はこんな感じのMixin(Sass)をよく使います。

###得られるもの
特定の数値のグリッドシステムに依存しない
デバイスごとに、コンテンツに合わせた最適なグリッドを再現出来る

##Remarks
段々とCSSどころじゃない濃い話になってしまいましたが、何かの参考になれば幸いです。