WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： たかし
カテゴリー： マークアップ >CSS

コーディングをしているとCSSの管理方法に悩むことがあります。
大規模なサイトを作る場合、基本となるCSSの作りが後々に響いてくることがあるので、
組み始めのときからわかりやすく管理していきたいですね。

今回は、初心者でも簡単できるCSSの管理方法をご紹介します。

目次をつける

CSSの量が増えてくると、
どこにどんなCSSを書いたのかわかりにくくなってきます。

そんな時は、CSSに目次をつけておくことで、
記述場所を簡単に知ることができます。

/* ----------------------------------------------------

目次

 1. basic
 2. header
   2-1. navgation
 3. contents
 4. footer
 5. parts
   5-1. margin
   5-2. padding
   5-3. h
   5-4. table
   5-5. list
   5-6. text

 6. form

 ----------------------------------------------------- */



/* 1. basic
------------------------------------------------------ */

/* 2. header
------------------------------------------------------ */

/* 2-1. navgation
------------------------------------------------------ */

/* 3. contents
------------------------------------------------------ */
.
.
.

この目次に書かれている文言でCSS内を検索かけると、
一瞬にして目的の箇所に移動することができます。

検索をする際の注意点

上記のように、通し番号と「.」を一緒に検索にかけないと、
目次と同じ名前でCSSが作られている場合、意図しない場所が結果としてでてくる可能性があります。

インデントをつける

プロパティごとにインデントつけることで、階層を一目で見ることができるため、
CSSの構造がわかりやすくなります。
また、他の人が編集する時もわかりやすくなると思います。

header {
	position : relative;
	margin : 0 auto;
	width : 980px;
	height : 60px;
	background  : transparent url(/common/img/header/bg_header.gif) repeat-x left top;
}

	header #seo {
		position : absolute;
		top : 10px;
		right : 10px;
		font-weight : normal;
		color : #666;
	}

	header #logo {
		position : absolute;
		top : 8px;
		left : 4px;
	}
	
		ul#fontsize {
			position : absolute;
			top : 32px;
			right : 0;
			width : 75px;
			height : 22px;
			padding : 0 0 0 80px;
			background : transparent url(/common/img/header/head_bg_fontSize01.gif) no-repeat 0 0;
		}
 

プロパティをタブで揃える

プロパティの値をタブキーで揃えることで、
目線の流れが一直線になるため見やすくなります。
一つ一つ設定をする手間はありますが、格段に見やすくなります。

aside {
	display	: inline;
	float	: left;
	width	: 250px;
}
	
	#snavbox {
		margin		: 0 0 20px;
		background	: #515558;
		padding		: 8px 0 6px;
	}

		#snavbox ul {
			margin	: 0 auto;
			width	: 235px;
		}
		

			#snavbox ul li {}

				#snavbox ul li a {
					display		: block;
					margin		: 0 0 3px;
					width		: 235px;
					height		: 42px;
					text-indent	: -9999px;
					overflow	: hidden;
				}

					#snavbox ul li#snav-area a  { background : transparent url(/bukken/detail/img/snav-area.gif) no-repeat 0 0;}
					#snavbox ul li#snav-price a { background : transparent url(/bukken/detail/img/snav-price.gif) no-repeat 0 0;}
					#snavbox ul li#snav-theme a { background : transparent url(/bukken/detail/img/snav-theme.gif) no-repeat 0 0;}
					#snavbox ul li#snav-large a { background : transparent url(/bukken/detail/img/snav-large.gif) no-repeat 0 0;}
					#snavbox ul li#snav-yotei a { background : transparent url(/bukken/detail/img/snav-yotei.gif) no-repeat 0 0;}
					#snavbox ul li#snav-sale a  { background : transparent url(/bukken/detail/img/snav-sale.gif) no-repeat 0 0;}
				
				
				p.s_stay a{
					color:#034e87 !important;
				}

プロパティの記述順序にルールをつける

CSSの記述順序をルール付けすることで、
目的の値を探す時間を短縮できます。

例として、ボックスモデルの外側から書いた場合の記述順序は下記の通りになります。

/* 
 * display
 * list-style
 * position
 * float
 * clear
 * margin
 * border
 * width
 * height
 * padding
 * background
 * color
 * font
 * text-decoration
 * text-align
 * vertical-align
 * white-space
 * other text
 * content
 *
 */

ボックスモデル図

上記図の外側からCSSを記述することで、
目的のCSSはどのだいたいどのあたりにあるのかわかるので探しやすくなると思います。

CSSの管理方法一つで運用のしやすさが変わってきます。
上記方法は手間がかかるものもありますが、特にオススメの方法なので、機会があれば是非お試しください。