はじめまして、キラメックスでデザインやマークアップを担当している山本ケントです。

初めての投稿になりますが、今回は「CSSの指定方法、こうやれば使いやすいんじゃ？」というテーマで（短めに）お送りします。

例えば新たなWEBサイトのコーディングで、.main-boxというクラスを作るとします。

.main-box {
	float: left;
	width: 500px;
	border: solid 1px #ccc;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 9px;
}

ちょっと寂しいですね、CSS3を使って装飾してみましょう

.main-box {
	float: left;
	width: 500px;
	border: solid 1px #ccc;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 9px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0px 2px 3px #ddd;
	-webkit-box-shadow: 0px 2px 3px #ddd;
	-moz-box-shadow: 0px 2px 3px #ddd;
}

それっぽい感じになりました。その後コーディングを進めていくうちに、.sub-boxが必要になりました。

.sub-box {
	float: right;
	width: 250px;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 10px;
}

これもちょっと寂しいですね、デザインを統一したいので.main-boxに合わせてみましょう

.sub-box {
	float: right;
	width: 250px;
	background: #eee;
	margin: 0 0 20px 0;
	padding: 10px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	box-shadow: 0px 2px 3px #ddd;
	-webkit-box-shadow: 0px 2px 3px #ddd;
	-moz-box-shadow: 0px 2px 3px #ddd;
}

それっぽい感じになりました。

…て進めていくと、何回も同じプロパティを書く事になってファイルサイズも大きくなるし面倒ですよね。なので、class名をプロパティのまとまり的に切ってみました。
Read the rest of this entry »