ほとんどのCSSプロパティの値は、DOMツリーのひとつ上のレベルから要素を継承します。滝状)スタイルシートと名付けられています。fontプロパティを参考に考えてみましょう。親要素からいつも継承されるので、各要素ごとに分けて設定する必要はありません。デザインでもっともよく利用するフォントスタイルを、htmlまたはbodyに加えてみましょう。以下は一般的な設定方法です。sans-serif;}後からいつでも特定の要素のみスタイルを変更することができます。ここで大事なのは繰り返しを避け、スタイルの継承を可能な限り利用することです。widthやheight、またはleft/top/bottom/rightを使い、直接デザイン要素をアニメーションさせるのは避けるべきでしょう。滑らかな動きを表現できるtransform()プロパティを利用するのが理想的で、コードを読むときに意図した内容を理解しやすくしてくれます。以下のコードをサンプルに見てみましょう。ballという要素を、右方向にスライドさせたいとしましょう。leftの値を変更する代わりに、translateX();を利用してみましょう。translateX(450px);}transformプロパティには、translateやrotate、scaleなどたくさんの機能があります。詳しいアニメーションの動きについては、以下を参考にどうぞ。自己流ではなく、ライブラリを利用しよう。CSSコミュニティーはとても活発に意見交換がされており、新しいライブラリも定期的に公開されています。したスニペットからレスポンシブ対応のアプリ作成用のフレームワークまで、ささまざまな用途に対応してくれます。そのほとんどがオープンソースです。同じ問題がすでに解決されていないか確認すると良いでしょう。セレクタの特殊性を下げよう。すべてのCSSセレクタが、平等に作られているわけではありません。書きはじめたころは,記述した場所よりも上にあるCSSセレクタは、いつも上書きされると思いがちです。いつもというわけではありません。以下のサンプル例を参考に見てみましょう。CodePen..activeを追加したとき、ボタンの色を赤に変更しようとしていますが、うまくいきません。これはより詳細度の高いIDセレクタと一緒に、background-colorを設定していることが原因です。詳細度ルールは以下の通りです。header)また詳細度は重なるので、a#button.activeはa#buttonよりもランクが上になります。詳細度の高いセレクタを使用していると、古いセレクタにも影響し、結局!importantを利用しなければいけません。使わないようにしよう。その場しのぎに!importantばかり使っていると、あとから上書きを大量にしなくてはいけません。その代わりに、なぜCSSセレクタが動かないのか見つけ、修正しましょう。!importantを使っていいのは、HTMLをインラインスタイルで上書きしたいときですが、こちらもできれば避けておきたい、もう一つのテクニックと言えるでしょう。