[CSS]スタイルシートをほんの少し軽量化する10のTips

簡単に実践できるものから、ちょっと手間がかかるものまでスタイルシートをほんの少し軽量化する10+1のTipsを紹介します。

How to Micro-Optimize Your CSS

Tips 1：カラーコードを短く記述

プロパティにカラーを指定する際は、最も短い値を使用します。

軽量化前

カラーをRGB値で指定しています。

article { background-color: rgb(255,255,255); }

カラーを16進法で指定しています。

article { background-color: #ffffff; }

軽量化後

16進法を省略して記述します。

article { background-color: #fff; }

更に軽量化

使用するプロパティは「background」でも同じ効果が得られます。

article { background: #fff; }

Tips 2：重複しているプロパティをマージ

重複しているものをまとめます。

軽量化前

フォントまわりに同じ指定をしている箇所が複数あります。

#wrap p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.22em;
	}
	.
	.
	.
p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

軽量化後

同じ指定のものをマージします。

p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

Tips 3：可能な時はいつでもショートハンドを使用

フォントや背景やマージンやボーダーなど可能な時には、ショートハンドを使用します。

軽量化前

個々のプロパティを使用しています。

p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

軽量化後

複数のプロパティをまとめて、ショートハンドを使用します。

p {
	font-family: normal 1.33em/1.33 Georgia, serif;
	}

Tips 4：同じ値を統合して指定

マージンで同じ値を指定するときは、統合して指定します。

軽量化前

左から順に、上・右・下・左の値になります。

margin: 10px 20px 10px 20px;

軽量化後

同じ値を統合します。左から順に、上下・左右の値になります。

margin: 10px 20px;

更に軽量化

四つが同じ値の場合は、更にまとめて指定します。

margin: 10px;

Tips 5：必要のない「0」を省略

数値に「0」を使用する時は、省略可能なものがあります。

軽量化前

二つのプロパティに省略可能な異なる「0」を使用しています。

padding: 0.1em;
margin: 10.0em;

軽量化後

省略可能な「0」を省略します。

padding: .1em;
margin: 10em;

Tips 6：「0」の単位を省略

プロパティの値に「0px」とする時、単位を省略します。

軽量化前

値に「0px」と指定しています。

padding: 0px;

軽量化後

値が「0」なので、「px」を省略します。

padding: 0;

Tips 7：最後のセミコロンを省略

最後のセミコロンを除くことができます。

軽量化前

最後の行にもセミコロンを記載しています。

p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em;
	}

軽量化後

最後のセミコロンを省略します。

p {
	font-family: Georgia, serif;
	font-weight: normal;
	line-height: 1.33em;
	font-size: 1.33em
	}

更に軽量化

ショートハンドの場合でもセミコロンを省略します。

p { font-family: normal 1.33em/1.33 Georgia, serif }

Tips 8：アップロード時にコメントを削除

CSSでコメントを使用することは有用で、整理されたスタイルシートを維持するのに必要不可欠なものです。しかしながら、そのコメントはブラウザにとっては100%無駄なものです。
サーバーにアップロードして運用するスタイルシートファイルからは、コメントは削除するようにします。

Tips 9：空白スペースを削除

可能な限り空白スペースを削除します。

軽量化前

よくある記述例です。

body {
	font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
	background-color: #333;
	text-align: center;
	margin: 0px auto;
	font-size: 62.5%;
	color: #FFF;
	}

軽量化後

不必要な空白スペースを削除します。

body{font-family:"Trebuchet MS",Verdana,Arial,Helvetica,sans-serif;text-align:center;background:#333;margin:0px auto;font-size:62.5%;color:#fff}

ショートハンドなどの必要な空白スペースは削除しないでください。

軽量化前

ショートハンドの記述例です。

p {
	font-family:normal 1.33em/1.33 Georgia,serif;
	}

間違った軽量化

ショートハンドから空白スペースを削除すると、期待通りの表示をしません。

p {
	font-family:normal1.33em/1.33Georgia,serif;
	}

Tips 10：見栄えをよくするフォーマットは無しで

スタイルシートを管理する上で見栄えをよくするために使用する[Tab]や空白スペースや改行を削除します。

軽量化前

[Tab]や空白スペースや改行を使用して、見栄えよく記述されています。

hr {
	margin: 25px 0 25px 0;
	background: #CF7400;
	text-align: left;
	padding: 15px 0;
	display: block;
	border: 0 none;
	color: #CF7400;
	height: 1px;
	clear: both;
	width: 96%;
	}
acronym, abbr {
	border-bottom: 1px dotted #514031;
	cursor: help;
	}
ins { text-decoration: underline; }
del { text-decoration: line-through; }
sup {
	font-size: 10px;
	line-height: 0;
	color: #cccc99;
	}
em       { font-style: italic; }
small    { font-size: 10px;    }
strong   { font-weight: bold;  }
strong:target, h3:target, h4:target {
	background: #CF7400;
	padding-left: 25px;
	}
code, kbd, samp, tt, var {
	font-family: "Courier New", Courier, monospace, sans-serif;
	color: #cccc99; /* #cc9933 #cccc66 #cccc99 */
	font-size: 11px;
	}
	h3 code { font-size: 13px; }
pre {
	border-left: 1px solid #CF7400;
	padding: 10px 0 12px 10px;
	background: #3B2E22;
	overflow: auto;
	margin: 25px 0;
	width: 525px; /* 95% of 555px = 525px */
	}
	pre:hover {
		border-left: 1px solid #FFFFCC;
		background: #3B2E22;
		}

軽量化後

見栄えのための[Tab]や空白スペースや改行を削除します。

hr { background:#CF7400;margin:25px 0;text-align:left;padding:15px 0;display:block;border:0 none;color:#CF7400;height:1px;clear:both;width:96%; }
acronym,abbr { border-bottom:1px dotted #514031;cursor:help; }
ins { text-decoration:underline; }
del { text-decoration:line-through; }
sup { font-size:10px;line-height:0;color:#cc9; }
em { font-style:italic; }
small { font-size:10px; }
strong { font-weight:bold; }
strong:target,h3:target,h4:target { background:#CF7400;padding-left:25px; }
code,kbd,samp,tt,var { font-family:"Courier New",Courier,monospace,sans-serif;color:#cc9;font-size:11px; }
h3 code { font-size:13px; }
pre { border-left:1px solid #CF7400;padding:10px 0 12px 10px;background:#3B2E22;overflow:auto;margin:25px 0;width:525px; }
pre:hover { border-left:1px solid #FFC;background:#3B2E22; }

Tips 11：CSSに間違いがないかチェック

最後に、CSSが妥当であるかどうかを確認するために、「CSS Validation Service（カスケーディングスタイルシートを検証）」であなたのスタイルシートファイルをチェックしてください。
これは、CSSにミスが無いかどうかチェックをしてくれます。