コーディングで大切なこと、
それは保守性・運用性に優れているかどうかです。
「理解しやすく・変更の手間がかからないコード」
が良いコードです。
ホームページは作って終わりではなく、そこからどんどんと変更が加えられます。
同じ人が更新するとは限らないですし、自分で作ったコードを更新するとしても月日がたっても思い出しやすいコードでないといけません。
誰が触っても、変更時に理解しやすく手間のかからないコードにしましょう。

きれいなコードが書かれているか

インデントを使って見た目がきれいということはもちろん、
無駄なタグは使わずに、できるだけシンプルなコードを心がけましょう。
必要な場合以外、inlineによるスタイル指定は基本的にはNGです。
タグ要素はできるだけ少なくしましょう。

インデント

インデントは可読性を高めるうえでとても大切です。
インデントがずれずれで、かえって見にくいという笑い話のようなこともありましたが。
タグがどこからはじまって、どこで終わるかがコーディング上わかりやすくなります。

例

スタイルのinline指定について

スタイルはinlineではなく、外部CSSで指定します。
最近勉強を始めた人にとっては当たり前のことかもしれませんが、
かつてはインラインでスタイルを指定する人も多く、今でもたまに見かけます。
インライン指定はそこしか考えなくていいので楽かもしれませんが、コードが汚いだけではなく保守性が悪いです。
必要な場合以外は、外部CSSで指定するようにしましょう。

例

classやidのネーミングはとっても大切

cssを適用するのに、タグ要素にclassやidを付加します。
このclassやidのネーミングが悪いと保守性が悪くなります。
例えば、class=”company”と書けば、ここは”company=会社案内”と容易に想像がつきますが、
class=”block1″とかだと、コードとデザインを比較して調べないといけません。
コード内にはすごい数のclassが指定されるので、何かわからないクラス名は理解しにくいコードとなってしまいます。

alt属性はちゃんと書けていますか？

これは書くほどでもないのですが、これまでお願いしてきた方で、このalt属性が書けていない人がいました。
後からこちらでalt属性をすべてチェックしていくわけにもいかず、基本的にはコーダーさんを信用することになります。
alt属性はSEO上も重要なものですので、完ぺきではなくてもいいですが、その画像を表すキーワードをせめて入れておいてほしいものです。

ホームページには、ヘッダーやフッター、ナビゲーションなど共通の部分がいくつか見られます。
これらはわかりやすいのですが、見出しやリスト要素なども出てくる場所は違っていても同じスタイルを使用することは多いです。
場当たり的なコードを書いてしまうと、その場その場でスタイルを指定しがちですが、共通しているスタイルは１カ所で指定するようにしてそのスタイルを使い回しましょう。
同じスタイルを何度も書くことが無いように意識しましょう。
共通のタイトル部分がページごとに用意されたcssで記述されていることが何度がかあり、
同じスタイルが何度も書いてあることがありました。
タイトルのデザインに変更があった際には、すべてのCSSを書き換えないといけないということになります。
部分的に違う部分は、追加クラスを作って部分的に上書き指定して対応します。

スタイルの共通化は、あらかじめ設計時に決めることもありますが、コーディングしていくうえでこれは共通化してまとめられるんじゃないかと思ったらその場で共通化していくこともあります。
常に意識しておくことが大切です。

classやidは、単にユニークであればよいわけではなく、コーディングをする人がわかりやすいものにする必要があります。
ここでは、まずはダメな例を、いくつかの命名規則について紹介します。

意味の分からない名前はダメ

名前は好きに考えることができますが、なかなかいい名前が思い浮かばないこともあります。
ですが、絶対やってはいけないのは意味のないネーミングです。
class=”block01″とかは典型ですが、それに続けてclass=”block02″, class=”block03″などと並べることがあります。
これでは、それぞれ何を表しているのかわかりません。
連番とかは、間に追加があたときには番号のためにかえってややこしくなります。
特に、.css上のスタイル指定の部分からは全く読み取れません。
class=”company”とかclass=”policy”とか、わかりやすい名前にしましょう。

スタイルを名前に使ってはダメ

よくあるのが、class=”mb20″とかlass=”pr30″みたいなもの。
これはそれぞれ”margin-bottom:20px”, “padding-right:30px”を簡単に使いたいということなんですが。
クラス名に数字入っていたら、このクラスのスタイルは未来永劫数値を変更できないじゃん！ってことになります。
marginやpaddingに限らず、特定の感覚とかサイズとかを共通化したいのはわかりますが、
クラス名がスタイルを縛ってしまっては意味がありません。
また、これだけ汎用性が高いとヘッダーやフッター、小さな<span>要素かかわらずに使われていて、変更がとても大変だったことがあります。
クラス名にそのスタイルそのものを書くのではなく、それを使う状況や場面を表したクラス名としましょう。
例えば、
class=”box_bottom-small”やclass=”box_bottom-large”
class=”navi_bottom-small”やclass=”navi_bottom-large”
などにしておけば後で変更しても問題ないですよね。

命名規則を知っておく

classやidにはいろいろな人が便利に使うために考えた命名規則がありますが、
その中でも弊社でベースとしているものはBEMというものです。
「BEM」で検索するとたくさん参考サイトが出てきますので、勉強してみましょう。
はじめはおおざっぱでもいいので使い慣れていきましょう。