見やすいHTML・CSSを書こう。

• Web Create
• 2017.03.25

こんにちわこんばんわ、ちばです。

クズの本懐というアニメの原作の最終巻を読んで高まりがすごいです。
私はえっちゃん推しなのですが、もうえっちゃんを見れなくなるかと思うと。。。

そんなことはさておき、今年に入り社内の人口が少しずつ増えてまいりました。
もちろんそれに伴いコーダーも増えてるわけですが、HTML・CSSの書き方にも個人差があります。

個人差が多少ある分には良いのですが、慣れないうちは見づらかったりどうやって書けばいいかわからずで激しいコードになってしまう方もいるかと思います。

なので今回は私が意識している事を一部書いてみようと思います。

HTMLの書き方

• インデント・改行に一貫性を持つ。
• パット見わかりづらいコメントはつけない。
• セクション毎に適切なコメントを入れる。

インデント・改行に一貫性を持つ。

1番目についてはセクションとセクションの間は2改行、他のブロック毎は1改行とかを意識しています。
この辺はどれが見やすいと感じるかは別れるかと思いますが、一貫性をもたせることによって気持ち悪さ、見づらさは少しでも解消出来ると思います。

パット見わかりづらいコメントはつけない。

2番目はCSS設計の話題などでよく目にしますね。
適切なクラスをつけないとHTMLが見づらくなる要因でもあるので気をつけたいです、。

セクション毎に適切なコメントを入れる。

3番目はセクションの開始、終わりがどこかをコメントで示してあげます。

<!-- hogeBlock -->
<section class="hogeBlock">
  <p class="fugafuga">
    ダミーだよ！！
  </p>
</section>
<!-- /hogeBlock -->

<!-- fugaBlock -->
<section class="fugaBlock">
  <p class="fugafuga">
    ダミーだよ！！
  </p>
</section>
  <!-- /fugaBlock -->

このようにセクション毎にコメントをつけてあげると、ネストが深くなり閉じタグが連なっても見分けがつきやすいです。

CSSの書き方

• ブロックやエレメント毎に適切にコメントを入れる。
• ネストを深くしすぎない。
• プロパティの記述順に一貫性を持つ。

ブロックやエレメント毎に適切にコメントを入れる。

こちらははHTMLの方の3つ目とほとんど同じです。

/*===================
 hogeBlock
===================*/
.hogeBlock {
  margin: 0;
  padding: 0;
}
.hogeBlock p {
  margin: 0;
  padding: 0;
}


/*===================
 fugaBlock
===================*/
.fugaBlock {
  margin: 0;
  padding: 0;
}
.fugaBlock p {
  margin: 0;
  padding: 0;
}

このようにコメントを適切にいれてあげることによって、記述場所を探すのが容易になりますね。
またコメントも大きブロック、小さいブロック、エレメントなどで何パターンか作り統一しておくと更に見つけやすくなっていいと思います。

私は下記のようなパターンを良く使います。

/===================
hogehoge
===================/

/* hoge_hoge
——————*/

/* hoge */

ネストを深くしすぎない。

これもCSS設計の話でよく出てきますよね。

ネストを深くしすぎてしまうと、目的の箇所を探すのが大変だったり継承や強さの把握がしづらくなってしまうので
私は多くても3つ前後のネストになるようにしています。

.fugaBlock .fugaBlockInner article.fugaBlockItem div ul li a span{
  color: tomato;
}

上記みたいなのは私はなるべく見たくないので気をつけています。

プロパティの記述順に一貫性を持つ。

これはちょっと説明しづらいのでまずは下記を見てみてください。

/* hoge */

.hoge {
  font-size: 0;
  display: block;
  border: 1px solid tomato;
  padding: 0;
  margin: 0;
  background: #fff;
}

.hogehoge {
  background: #000;
  font-size: 2rem;
  padding: 10%;
  border: 1px solid tomato;
  display: inline-block;
  margin: 0 0 10px;
}


/* fuga */

.fuga {
  display: block;
  margin: 0;
  padding: 0;
  border: 1px solid tomato;
  background: #fff;
  font-size: 0;
}

.fugafuga {
  display: inline-block;
  margin: 0 0 10px;
  padding: 10%;
  border: 1px solid tomato;
  background: #000;
  font-size: 2rem;
}

上記のコードですが、「.hoge」と「.fuga」どちらが見やすいですか？

私は「.fuga」が順番が統一されていて見やすいと思っています。
順番については個人差があるかとは思いますが、こちらも一貫性を持つことによって可読性が変わってくると思います。

まとめ

一年前の自分ができていなかった事をまとめてみました。

もし今書き方にこだわりが無いという方は試してみてください。

また、エディタによってはcsscombやeditorconfig等が使えるのでそちらを使うのもおすすめです。

そしてアニメ、クズの本懐見てみください。
えっちゃん最高に可愛いので見てください。

それでは。