シンプルで汎用性のあるコーディングとは

他人の書いたソースを修正するのって大変ですよね。

それぞれ人によってルールも考え方も違うので、ソース全体のルールを把握してから取り掛からないと、後から見たときに「グチャグチャ」なんてことになってしまいます。

今回は、私の考える「汎用性のあるHTMLとCSSのソースのルール」をご紹介します。

ルール1、区切りの良いところでインデントとコメントを入れる。

後から見たときに、どこからどこまでが一つのブロックかが分かるように、インデントとコメントをつけよう。

<!-- START header -->
<div class="header">

	<ul>
		<li></li>
		<li></li>
		<li></li>
	</ul>

</div>
<!-- END header -->

ルール2、よく使うスタイルは、テンプレートとして用意しておこう

下記のようなよく使うスタイルは別で用意してあげておくと、CSSファイルが無駄に縦に伸びないのでシンプルになります。

.mb10{ margin-bottom:10px; }
.mb20{ margin-bottom:10px; }
.mb30{ margin-bottom:10px; }
.mb40{ margin-bottom:10px; }

.strong{ font-weight:bold; }

ルール3、クラス名とコンテンツの内容は関係ないものにする

「news」や「interview」など、コンテンツの内容を表すクラス名を設定してしまうと、
別のコンテンツに同じクラスの内容を設定するときに、また新しく同じクラスを作らなくてはならなくなります。
もしくは、無理矢理そのクラスを使って、事例を表すコンテンツなのに、クラス名は「news」なんてことになってしまいます。

これを防ぐには、コンテンツの要素ではなく、マークアップ的観点からクラス名を設定します。

<!-- START header -->
<div class="box01">

	<ul class="list01">
		<li></li>
		<li></li>
		<li></li>
	</ul>

	<p class="txt01"></p>

</div>
<!-- END header -->

簡単にいうと、どこでも使える汎用的な名前にしようね、ということです。
私がよく使うのは下記のような感じのクラス名です。

.txt01{ //中身 }
.box01{ //中身 }
.cont01{ //中身 }
.tit01{ //中身 }
.list01{ //中身 }
.dl01{ //中身 }

txt02、txt03、と別バージョンが増えていくわけです。

ルール4、ズラズラ複合セレクタを指定しない。

たまにあるのが、下記のようなクラスの指定をする方法。

div.header .news dl dd.tit01 p span.color01{ //中身 } 

こういう指定をしちゃうと、例えば似たような「tit02」を別の場所に指定してあげたいときに、
非常にめんどうになります。

大体こういう指定をする人は、「div.header」や「.news」などにもいろいろ指定しているので、
単純にtit01と同じ見え方で別の場所に「tit02」を作ろうとしても、すごい手間がかかります。
イマイチうまく説明ができませんが、そうなんです。

なので、複合セレクタはあんまり長くせずに、その場所を最も的確に表す、かつ固有のセレクタにしましょう。

ルール5、目次を作ろう

初見のCSSでもどこになにがあるか分かるように、CSSソースの最初には目次を作ろう。

/* txt */

/* tit */

/* box */

/* margin */

/* header */

/* main */

/* footer */

あとは、更新の度にしっかり整理整頓することですかね。

これからプログラムばかりでコーディングをスッカリやらなくなるかもなので、
自分のための戒めとして、まとめておきました。

なにかのお役に立てば幸いです。

  • このエントリーをはてなブックマークに追加

PICxPIC

会社を経営する30代男性。iPhoneアプリをつくったりしながら毎日ぴくぴく生きてます。

関連記事

  1. NO IMAGE
  2. NO IMAGE
  3. NO IMAGE
  4. NO IMAGE
  5. NO IMAGE

コメント

コメントをお待ちしております

プロフィール

PICxPIC
1983年生まれ。2010年からiOSアプリを開発し、2012年に法人化。メディア掲載やランキング、ダウンロード数などの詳しい実績などはこちら

PICxPICのアプリ

赤ちゃんの大冒険

おさるランド

動物オーケストラ2

子どもゲームランド

おしゃべりボタン

天空までのぼれ!

ジャンプで川下り

ひよこランド

動物オーケストラ

ポコポコアニマル

キラキラお絵かき

音が出るお絵かき

あいづちん