HTMLとCSSは、プログラミング初心者が、まずはじめに学習すべき言語として紹介されることが多いです。
その理由として、他の言語よりも簡単かつ理解しやすいということが１つ挙げられます。
しかし、簡単がゆえに「設計の基本」を学習しないまま、HTML / CSSを理解したつもりになっている人も多いです。
基本的な設計を抑えておかないと、自分一人でコーディングするときならまだしも、他人と共同作業するときに「なんだこのコードは…！」と悪い意味で驚かれてしまうことになるでしょう。
この記事では、HTMLとCSSでやってはいけない（俗に言うクソコード…）5選を解説していきます。
ユウマもし、記事内のやってはいけない書き方に心当たりがある方は、一度HTML / CSSの基本的な設計を見直してみることをオススメします。
それでは早速、見ていきましょう！
HTML・CSSのやってはいけない書き方5選
ID・クラス名をよく考えずに適当につけている
「よく考えずに適当に」というのは、例えば以下のよう命名のことです。
- #aaa
- .box2
- .syouhin
このようなクラス命名を行ったことがある方は要注意。
「#aaa」の場合、どこの何に適用するためのものなのか全く分かりませんし、「.box2」の場合もどこのボックスを指しているのか検討がつきません。
最後のローマ字での命名についても、基本的にはやめておくべきです。
限られた要素やプロジェクトによっては、ローマ字命名を使う場面もありますが、英語でのコーディングが一般的ではあるので使用頻度は控えた方が良いでしょう。
タグに直接スタイルを指定している
例えば見出しで使う「hタグ」や、リンクで使う「aタグ」など。
これらのタグに直接スタイルを指定した場合、それ以降で同じタグを使う場合、そちらにもスタイルが反映されてしまいます。
h1 { color: red; }<!-- スタイルを適用したい要素 -->
<h1>Hello, world!</h1>
<!-- こっちにもスタイルが適用されてしまう -->
<h1>Hoge Fuga</h1>特定のタグに依存させてスタイルを適用したい場合は、「タグ名.クラス名」といった書き方をすれば、他のタグに影響を及ぼす恐れがなくなります。
h1.text-red { color: red; }<!-- スタイルを適用したい要素 -->
<h1 class="text-red">Hello, world!</h1>
<!-- スタイルは影響しない -->
<h1>Hoge Fuga</h1>重複するスタイルを何度も記述している
１つのクラスで使い回すことができるのに、同じスタイルを複数回に渡って記述しているパターンです。
例えばこんなコード。
.heading-red {
color: red;
font-size: 40px;
letter-spacing: 4px;
margin-top: 32px;
}
.heading-blue {
color: blue;
font-size: 40px;
letter-spacing: 4px;
margin-top: 32px;
}上記のコードでは、見出しの文字色を変える為にクラスを2つ用意していますが、colorプロパティ以外のスタイルが重複しています。
このコードを改善すると以下のようになります。
.heading {
font-size: 40px;
letter-spacing: 4px;
margin-top: 32px;
}
.heading.red {
color: red;
}
.heading.blue {
color: blue;
}ベースとなるスタイルは同じクラス名で統一することによって、重複した記述はなくなり保守性も高くなりました。
重複している無駄なスタイルはとことんまとめる。このポイントを意識しておくだけで、CSSの記述量を大幅に減らすことが可能です。
CSSの入れ子が深すぎて魔窟レベルになっている
CSSの入れ子とは、要素の親子関係を指定して特定の要素にスタイルをあてることです。
ul li p { color: red; }上記のコードでは、「ulタグ」の中の「liタグ」の中「pタグ」の文字色を赤にする。といった意味になります。
この入れ子構造が深すぎる場合、どこに適用しているのかが非常に分かりにくく、保守性が低くなってしまいます。
一度、入れ子が深い場合のダメな例を見てみましょう。
ul li div p span span { color: red; }見ているだけで疲れますよね。
こうならないためにも、CSSにて入れ子構造でスタイルをあてる場合は、孫要素（3つ目の要素）ぐらいまでに留めておきましょう。
セレクタが混在しているせいでマークアップが変わった時に問題が生じる
CSSのセレクタ部分（.hoge { color: red; }でいうところの.hogeの部分）に、ID・クラス・タグが混在している場合、HTMLのマークアップが変わった時にスタイルがおかしくなる等の問題が生じてしまいます。
例えばこんなコード。
#header .menu ul li {}しかし仮にID部分を変更してしまったり、ul・liタグではないタグに置き換えた場合、指定したスタイルが一切効かなくなってしまいます。
このコードを改善するには、マークアップが変わってもスタイルを適用したままにできるように、極力依存関係なしのクラスを作ることが重要です。
/* HTMLに依存していない */
.menu {}
.menu__item {}上記のコードでは、HTML側の変更に影響される「ID・タグ」を排除し、汎用性のあるクラスを作ることで元のコードを改善しました。
ユウマ制作・開発の規模が大きくなればなるほど、修正や変更点はほぼ確実に出てくるので、常に汎用性のあるCSS設計を心がけておきましょう。
HTML / CSSの「設計」について学習したい方にオススメの本
ポチやってはいけない書き方については理解したけど、正しい設計についてはどうやって学習すればいいの？
ユウマHTML / CSSの設計部分について学習したい方は、以下の本を一冊購入して内容を読み込めばOKです。
こちらの本はCSSのさまざまな設計手法や、設計する上での考え方・実践ポイントについて明確に解説してくれている良書です。
ユウマHTML / CSSの設計を学びたい人には、まさにピッタリの本と言えます。
本自体かなり分厚くボリュームも多いですが、この本１冊で設計部分についてはしっかりマスターできるので、ぜひ手にとって学習してみて下さいね…！
最後に
この記事では、HTML・CSSのやってはいけない書き方についてご紹介しました。
最後にもう一度まとめます。
「この書き方、やってたことあるかも…」という方は、さらなるステップアップのために、HTML・CSSを深く学習してみることをオススメします。
ユウマCSSは簡単そうに見えて奥が深く、舐めてかかると痛い目に合う言語です。ぜひ原点に戻って基礎を固めていきましょう。
