CSS仕様

値の省略形

値を省略すると、CSS ファイルのサイズが削減され、可読性と保守性が向上します。

ただし、すべての値を省略する必要があるわけではありません。属性の値が省略されると、常にすべての項目が設定され、値に一部の項目を設定したくない場合もあります。

/* 比如我们用下面这个样式来让某个定宽的容器水平居中，我们要的只是left和right， * 而top和bottom不是这个样式要关心的（如果设置了反倒会影响其他样式在这个容器上的使用）， * 所以这时我们就不需要缩写 */.f-mgha{margin-left:auto;margin-right:auto;}/* 比如下面这个模块的样式设置，我们确实需要设置padding的所有项，于是我们就可以采用缩写 */.m-link{padding:6px 12px;} 

一般的に使用される省略方法については、コード形式を参照してください。

パフォーマンスを消費する属性を避ける

以下にリストされている属性は、レンダリング パフォーマンスの問題を引き起こす可能性があります。しかし、時にはニーズがすべてを上回ることもあります...

/* expression */.class{width:expression(this.width>100?'100px':'auto');}/* filter */.class{filter:alpha(opacity=50);} 

セレクターのマージ

これは CSS セレクターの組み合わせです。一度に複数のセレクターを定義でき、多くのバイトと貴重な時間を節約できます。

通常、定義を統一するために、同じ定義を持つ、またはほとんど同じ属性値を持つ一連のセレクター (関連しているため実際には同じ) を (カンマを使用して) グループ化します。

リーリー

背景画像の最適化と結合
画像自体の最適化:

画質の要件と画像ファイルのサイズにより、より良い画質を提供するには、使用する画像ファイルの形式が決まります。
写真がカラフルすぎて透明度が必要ない場合は、jpg 形式を使用してより高い品質で保存することをお勧めします。画像の色が濃すぎて透明または半透明の場合、または影効果を推奨する場合は、PNG24 形式を使用し、IE6 上で PNG8 縮退を実行する (またはその場合はフィルターを使用する) ことをお勧めします。太 色が豊富でない場合、透明性の要件がある場合でも、ほとんどの場合、この形式を使用することをお勧めします。
画像にアニメーションがある場合、GIF形式のみ使用できます。
ツールを使用して画像を再圧縮できますが、これは色と透明度が影響を受けない場合に限ります。

複数の画像の結合:

個々のアイコンの間には隙間が必要です。隙間のサイズはコンテナのサイズと表示方法によって決まります。これの利点は、「耐障害性」が考慮され、イメージの保守性が向上することです。
アイコンの配置もコンテナのサイズと表示方法によって決まります。配置方法は、横配置（コンテナの幅制限あり）、縦配置（コンテナの高さ制限あり）、斜め配置（コンテナの幅と高さ制限なし）、左配置（コンテナの背景が左側）のタイプに分かれます。 、右配置（コンテナの背景が左側）右）、水平中央配置（コンテナの背景が水平中央）、垂直中央配置（コンテナの背景が垂直中央）。
結合された画像のサイズは 50K を超えてはならず、推奨サイズは 20K ～ 50K です。改 複数の修正を行った後でも画像の品質を確保するには、PSD の元の画像を保存し、PSD で修正して追加し、最後に PNG をエクスポートしてください。

分類結合:

すべてのアイコンを 1 つの画像に結合することは最善ではありません。画像サイズを制御することに加えて、次の方法にも注意する必要があります。

配置された写真を結合することはできません画像の配置に応じて同様にスタイルを制御することができます。
同じモジュールまたはコンポーネントに属する画像をモジュールまたはコンポーネントに従って結合し、モジュールまたはコンポーネントのメンテナンスを容易にします。
写真のサイズに応じて結合され、同じまたは類似したサイズの写真を結合してフル活用できます。写真スペースの使い方。
写真の色に応じて同じまたは類似した色の写真を結合して、結合された写真の色が濃くなりすぎず、色の歪みを防ぎます。
上記の方法を元に組み合わせます。


ハック回避

回避のコストが高い場合、たとえば、大量の HTML を追加したり、より多くの CSS を記述する必要がある場合は、損失を上回る利益が得られます。 豊富な実践経験は、これらの一般的な問題を理解し、さまざまなアイデアを使用して問題を回避するのに役立ちます。そのため、ここでは経験と思考方法が非常に重要です。
自分の能力に応じてハックの問題を解決してください。ハックを回避するために自信のない方法を使用することはお勧めしません。その方法自体にまだ発見されていない問題がある可能性があります。


CSSでできるならJSを使わないでください

CSSにもっと多くのことをさせて、JSの開発量を減らしてください。
CSS を使用してインタラクションや視覚的な変更を制御します。JS は className を変更するだけで済みます。
CSS を使用して複数のノードのスタイルを一度に変更し、複数のレンダリングを回避し、レンダリング効率を向上させます。
製品が以前のバージョンのブラウザと互換性がない場合は、アニメーションの実装を CSS に任せることができます。


読みやすく修正しやすい

「CSS仕様」の要件をすべて満たしていれば、自然と読みやすく修正しやすい美しいCSSが書けるようになります。
もちろん、コードの形式と命名規則は比較的重要です。
Clear CSS module

命名規則の要件を満たしている場合、CSS モジュールが明確に表示されます。

「コメント」を使用して各モジュールを説明することは、大きな CSS ファイルの場合に特に重要です。
ファイル圧縮

CSS を合理的に作成すると、ファイルのサイズを大幅に削減できます。完了したら、ファイルの内容を損なうことなく CSS を圧縮するためのあらゆる手段を試してください。コメント、余分なスペース、改行を削除できます。

圧縮ツールの詳細については、「HTML/CSS ツール」セクションを参照してください。
その他の形式の最適化

最適化方法については、コード形式を参照してください。 http://www.cnblogs.com/LoveOrHate/p/4448833.html