設定しておくと便利？ なおすすめCSS

リセットCSS

各Webブラウザは最低限のHTML表示を保障するための独自のCSS(user agent stylesheet)を持っており、同じHTMLでもブラウザ毎にフォントサイズやマージンなどの表示に多少の差が生じます。
それを防ぎブラウザによるスタイルの差異をなくすために、ブラウザ独自のCSSをあらかじめ無効化するためのリセットCSSが必要となります。リセットCSSを使わないとブラウザ毎に微妙にデザインが崩れたり、それを防ぐためのCSSの記述が煩雑になるなどの理由から、現時点のWeb制作においてはほぼ必須の要素となっています。
リセットした後はスタイルを0から再調整していく手間が発生しますが、その手間を上回るメリットが多いため重宝されています。

なお、完全にリセットせずブラウザ独自のCSSを活かしつつ見た目を均等に整える調整したCSSを「ノーマライズCSS」、ノーマライズCSSに＋αしてモバイル用などの細かい調整を入れたCSSを「サニタライズCSS」と区別するようです。

これらは自分で用意するより以下↓のものを使うのが手っ取り早いです。どれが適切かは使いやすさやサイトの状況で判断してみてください。

• Destyle.css
• HTML5 Reset Stylesheet
• ress.css
• Normalize.css
• sanitize.css

以下も設定しておくと便利な設定ですが、上記のCSS内に含まれているものもあれば無いものもあります。必要なものを確認・追加していくと良いでしょう。

大きさの計算

ボックス要素全体の大きさは「幅(width)or高さ(height)＋内側の余白(padding)＋線幅(border)」との合算で計算しなければならないため、要素の幅を計算して設定する手間が生じます（幅が可変する場合は特に）。
それを解消するには、box-sizing: border-box; を設定しておきます。box-sizing は幅と高さの算出方法を変更するための設定で、border-box を指定することで余白と線幅の数値が幅と高さの数値に自動的に含まれるようになり、煩わしい計算が不要となります。特に calc を使った数値の計算が入る際に便利です。

*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

疑似要素に対しても指定しておくと後々便利です。

文字詰め

font-feature-settings を設定するとテキストの文字詰め（カーニング）を行うことができます。テキストの見栄えに差をつけることができますが、文字間が詰まりすぎる場合があるので letter-spacing で調整もすると良いでしょう。
font-feature-settings で設定できる文字詰めのプロバティには以下があります。デザイン上適切なものを選びましょう。

palt
約物も含めすべての文字間が詰まる。

pkna
句読点やかぎ括弧など一部の約物は文字詰めされず全角のままになる。

pkna
ひらがなとカタカナのみ文字詰めされる。約物や全角英数字は文字詰めされない。

body {
	-webkit-font-feature-settings: 'palt';
	font-feature-settings: 'palt';
}

OpenTypeフォントかつプロポーショナルメトリクス情報を含むフォントにのみ適用されるため、MSゴシックやメイリオには反映されません。ヒラギノ角ゴシックや游ゴシックなどを使う際に一考してみましょう。

iOSフォーム要素の初期化

iOSのフォーム要素には独自に角丸やシャドウが適用されていて、こちらで普通にCSSを設定してもiOS用の装飾が優先され、思うようにデザインが反映されません。
こういう場合、デフォルトスタイルを無効にする appearance: none; を設定することでiOS用の装飾をリセットすることができ、独自のCSSを反映させることが可能になります。

input, button, textarea, select {
	-webkit-appearance: none;
	appearance: none;
}

ただ、上記のように単純にフォーム要素全体に適用させると必要な表示まで消えてしまう（特にラジオボタンなど）場合があるため、一部の要素にのみ適用させるなどの細かい選択・調整も必要です。

スマホ横向き時のフォントサイズ

サイトをスマホで表示させた際、横向きにするとフォントサイズが拡大されてしまうことがあります。
text-size-adjust: 100%; でそれを防ぐことができます。

body {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}

画像の調整

1：
画像にあらかじめ max-width: 100%;を設定しておくと、配置した画像のサイズがボックス範囲からはみ出る時に自動的に縮小してくれます。縮小する幅に合わせて縦幅も調整されるよう height: auto; も設定しておきましょう。
単純に width: 100%; と設定してしまうとすべての画像が強制的に拡大されてしまうので、max-width を使うほうが無難です。

2：
画像を配置する際、画像と他要素の間にスキマが発生することがよくあります。理由は様々ですが、親要素内のフォントサイズや行の高さ指定が大きいなどの理由がよく挙げられます。
親要素の調整も必要ですが、画像にあらかじめ vertical-align を設定をしておくことでもある程度回避できます。

これらの設定をまとめるとこうなります。

img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}

imgへ独自にCSSを施していく関係で max-width の設定が邪魔になる事もたびたびあります。img全体に対して設定するか、特定のimgに対してのみ設定するかは状況次第で。

あらかじめ設定しておくと役に立つCSSは他にもあると思いますが、気づいたら追記していきます。