【HTML・CSS】「メンテナンスのしやすい」「キレイ」なコードを書く方法について

Question

HTML・CSSのコーディングで、「だれもがわかりやすい」、「メンテナンスがしやすい」、「キレイ」を目標に作るときどういったルールでやればいいのでしょうか？

自分はとりあえずブラウザでみれればいいやというタイプでとにかくコードが汚く、長くなってしまいます。
もしみなさんがこれをルールにコーディングしているやこすればいいというものがあったら教えていただけるとうれしいです。

Answer 1

「だれもがわかりやすい」

・CSSの仕様をちゃんと理解して書く
・プロパティの継承・上書きの仕組みをうまく活用し、無駄のないプロパティ指定をする
・セレクタの種類や詳細度などの優先順位の仕組みを理解し、適切なセレクタを作る
・セレクタの命名規則を一貫性・法則性のあるものに統一する（オリジナルの命名規則でも、BEMやSMACSSのような広く浸透している命名規則でも何でもいい）
・CSSルールを適切に分類し、わかりやすいコメントを適宜記述しておく

「メンテナンスがしやすい」

・OOCSS（オブジェクト指向CSS）の考え方を取り入れ、できるだけコンポーネント化する
・詳細度が高く、後から上書きしづらいidセレクタは原則スタイル指定には利用しない
・HTML構造が変動する可能性のあるところにタイプセレクタでのスタイル指定をしない
・可能であればsassなどのプリプロセッサを導入し、機能別・ページ別に分割されたパーシャルファイルで作業をする

「キレイ」

・内容的な美しさは、CSSの仕様を正しく理解できれば自然とある程度担保できるようになる
・プロパティの記述順、インデントの有無等といったデータ整形はツールで処理するのが吉

一般的に言えることだとこんな感じでしょうか。
ただ、「誰が」「何のために」「どんなものを」運用していくのか、というのは案件によって様々なので、
最終的にどうすればその案件にとってよりベターなものになるのかは本当にケースバイケースです。
何十人もの人が同時にあれこれ作業する、大規模サイトの運用ルールと、
1人で全体を把握できる程度の小規模サイトに求められるものが同じわけはないですし、
規模が同じでもデザインやコンテンツの特性によってどのような設計にしておけばメンテナンス性が高まるのかはまちまちです。

・メンバーのスキル／知識レベル
・運用しているサイトの特性
・制作環境、運用体制

などを総合的に考慮して、何を重視するのか自分で判断することが求められるかと思いますね。

--追記
上記は全部CSSの話です。

HTMLの方は

・文法・仕様をちゃんと守る
・入れ子になるところのインデントを揃える
・ブロック単位など最低限のコメントを入れる

くらい出来ていれば大体OKだと思います。

Answer 2

https://syncer.jp/html-prettyprint
こういったツールが色々ありますので、公開前や納品前に統一されてみてはいかがでしょうか。
「好み」で片付けられても困りますものね。

Answer 3

みなさん様々な回答ありがとうございます。
ツールや実際にコードを記入するなどとても親切に教えてもらえ大変助かりました。
また、もう一度見つめなおすのもかねて仕様書をしっかり読んでいこうと思います。

Answer 4

1. 誰もが分かりやすい

コードを書く前に全体の仕様を書くことです．
オブジェクト指向言語などではUMLというの用いてシステムの流れや内部モジュールの相関関係をあらかじめ決めておくことで多人数で開発しています(団体により異なりますが)．

1. メンテナンス

1ができていれば大丈夫でしょう．
コードを書く際コメントをaddする癖をつけておくと各モジュールの手直しがしやすいです．

1. キレイ

まず紙とペンで書いてみましょう！(←あくまで個人的な意見です)
paddingやmerginは視覚化することで設計しやすくなりますよ．
デザインの部分は個々のセンスです．
webや書店で「美しいUI」や「見やすいデザイン」をキーワードに探すことから始めてみてください．
アフィリエイトブロガーのHPなどは意外にも参考になりますよ．

Answer 5

趣味でプログラミングしています。

私は「インデント」を使って書くですね。

たとえば、

function test(){
var abc = 100;
}

と書くよりも、

function test(){
         var abc = 100;
}

の方が見やすいですよね。

私の場合は、関数名や、for文の条件文 のところから開始していることが多いです。

例:

function test(){
          for( i = 0; i < 10; i++ ){
               document.write( "test" + i );
          }
}

後は、変数名や関数名、オブジェクト名... は 機能や用途 から名前をつけます。

例:
ファイルの入出力 (クラス) -> Input and Output for FILE -> IOFile

そういう風に決まりを定義してそれに沿っていけば(比較的)綺麗なソースコードになると思います。