HTMLのコーディングにおいて、個人的に意識している事を公開。

後で追記したり、違うなーと思ったら予告なく変更したりします。

CSSについては「R流 CSS Coding Styles」で触れています。

最初にCSSオフの状態を考える

通常フローで配置される状態を考えながらコンテンツを配置していくようにします。

慣れてない人はデザインをあまり意識しないように。ある程度慣れている人であれば、デザインを意識しながらでも問題ないと思います。

初心者でなければ、「どうスライスするか」と同時に「要素の占める領域（Web Developerの枠線表示のようなイメージ）」等を頭に浮かべながらコーディングできると思います。

id, class属性はCSSを書く前に一通り付与する

本来、id属性で要素を一意なものにしたり、class属性で要素を分類するのは、デザインに依存するものではないと思うのでこのようにしています。むしろ、デザインに依存させないためにこのようにしているとも言えます。

これができるのとできないのとではHTMLだけでなく、CSSの品質にも差が出ると思います。というより、下手なマークアップや無駄が多いCSSを書いている人には難しいと感じるのではないかと思われます。

id名はなるべく具体的に、class名はなるべく抽象的に

id属性値はページ内で一意なものでなければならないので、具体的な名前にしておいた方が良く、将来的に何らかの要素を追加した際に名前が被ったりすることがない程度であれば良いと思います。

一方、class属性値は抽象的な名前にしておき、似たような種類の要素やグルーピングに幅広く付与しておきます。例えば、グローバルナビゲーションもローカルナビゲーションもコンテンツ内のチョットしたナビゲーションも全部「Navigation(s)」というclassを付与します。

命名方針、スタイルに関しては別途書く予定あり。

CSSのオン/オフで要素の配置順をあからさまに変えない

例えば、「コンテンツ → ヘッダ」の順に配置して、CSSで「ヘッダ → コンテンツ」の順に見せるのは可能だけど、そういうトリッキーな配置にはしない。

論理構造と表示がそこまで異なるのは何かが間違っているのではないかと考えます。

なるべく階層は浅くしておく

無闇に要素を追加して階層を深くしない。

安易なdiv要素の追加で逃げない。（何からかを敢えて書くことはしない。）

特に、***-innerみたいなよく分からないグルーピングはしない。

シンプルな構造を保つことで、コードの量を減らすことができ、コードの見通しも良くなると思います。

インデントはしない

HTMLは階層が深くなりやすく、個人的にインデントのせいで逆に見通しが悪くなる事が多いと思うので、インデントは一切しないようにしています。

代わりに、固まり毎に空行を入れたり、コメントで補います。

また、インデントしない事で、上から下まで左端だけを見ても殆どの要素が並んでいるので、それだけで十分構造が分かり、メンテナンスしやすいと思います。

あと、コメント次第でファイルサイズの微妙な軽量化にもなったりする。場合によっては無視できない程になることもあると思います。

ただ、初心者には不向きらしいです。インデントがないと構造が分からないと言われることもしばしば。

私は大体こんな感じでやってます。

ちなみに、私は完全手打ちに慣れてしまっているので、コード補完機能でさえも鬱陶しいと思っています。なので、基本的にコード補完機能はなしでマウスも殆ど触りません。

インデントの部分はそんな人向けだと思います。それ以外の人には理解できないかも。