デザイナー兼コーダーの篠原です。
最近、初心に返って、良いコードってどんなだろう？と考える機会がありました。
そこで今回の内容は、HTML/CSS(SCSS)で"悪くない"コードを書くポイントについてです！
そもそもなぜ良いコードを書かないといけないのか
一言で、分かりにくいからです。
自分以外にもそのコードを見たり触ったりする人がいる場合、
自分以外の人が見ても読み解きやすいコードを書かなければいけません。
ですが、コードの書き方は人によって異なりますし、良いコードの定義も人それぞれだと思います。
そこで私が気をつけているのは、
「良いコードを書こうとするよりも、悪いコードを書かないようにする」
ということです。
今までされた嬉しかったことよりも、今までされた嫌だったことの方が鮮明に脳に刻まれている。
という方は多いんじゃないでしょうか。
ある研究ではマイナスの記憶の方が、プラスの記憶の3倍残りやすいという結果も出ているそうです。
脱線しましたが、まずは”良いコード”よりも”悪くないコード”を意識して書こう、という話です。
では、具体的に何をすればいいのでしょうか。
一つずつ説明していきたいと思います。
その1 インデントを揃える
インデントが汚いコードほど、コーダーのモチベーションを下げるものはありません。
汚いインデント
|
1 2 3 4 5 |
<article class="container"><div class="content"> <h1 class="headline">INDENT KITANAI </h1><p class="txt">Indent Kitanai. Yaruki Nakusu.</p> </div> </article> |
ファイルを開いた瞬間こんなのが視界に入ってしまったら、一旦瞑想タイムに入りたくなりますよね。
親要素も子要素も、まるで見分けがつきません。
綺麗なインデント
|
1 2 3 4 5 6 |
<article class="container"> <div class="content"> <h1 class="headline">INDENT KITANAI</h1> <p class="txt">Indent Kitanai. Yaruki Nakusu.</p> </div> </article> |
インデントが整っているだけでコードの可読性はかなり上がるので、ここは丁寧にしておきましょう。
また、インデントをつける時は、スペースとタブが混同しないように注意しましょう。
その2 同じ記述を書かない
まとめられる記述はまとめて書きましょう。
一箇所修正をしてOKかと思いきや、こっちにもあっちにも同じ記述が…分けて書く必要ないのに…
ということが結構あったりしますよね。
分かりにくい上に、ファイルサイズが無駄に増えてしまう原因にもなります。
共通のコンポーネントなどは、なるべく記述をまとめて書くように気をつけてみましょう。
その3 プロパティにタグを指定しない
|
1 2 3 4 |
div { background: #ff0000; border: 5px solid #ddd; } |
例えばこのような記述があった場合、別のページにdivタグを記述したら、
そのdivタグの背景が赤になって5pxの枠線が付いてしまいますよね。
そうなるといちいちこの記述を打ち消す記述を入れなければいけなくなります。
また、このdivタグをsectionタグに変えた場合、htmlファイルとcssファイルの両方を修正しなければいけなくなります。
修正する側としては面倒ですよね。。
以上のことから、プロパティにタグを直接指定するのはあまりおすすめしません。
その4 よく分からないタグ使いをしない
例えば、
・〇〇〇
・✕✕✕
・△△△
というリストがあったとします。
コードを見てみたら、なぜかtableタグで記述されている…
なんてことがあったりしませんか？
正しいタグ使いをしないと、サイトの構造が良く分からなくなる上に、文書構造がおかしくなってしまいます。
そうなるとSEO順位の低下も招いてしまうので、適切なタグの使用を心がけましょう。
その5 ネストを深くしすぎない
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
.container { display: flex; .content { border: 1px solid #ddd; .txt { margin-bottom: 10px; .small { font-size: 1.2rem; .lnk { color: #ff0000; text-decoration: underline; } } } } } |
これどこまで続いてんの…？ってくらい深いネスト、ありますよね。。
可読性も保守性も著しく低下してしまいます。
ネストは深くても3階層くらいまでがよさそうです。
ちなみに、私が以前携わったプロジェクトは2階層縛りでした。
その6 分かりやすいclass名をつける
みなさんはこんなclass名に出くわしたことはありますか？
|
1 2 3 4 5 6 7 |
.a { display: block; } .div2 { border: 1px solid #ddd; } |
これだと、このclass名が一体どういう役割で、何を指しているのか分からないですよね。
.div2ってことは.div1とか.div3とかもあるの？といらぬところにまで気を遣わなければいけなくなります。
CSS/SCSSの命名規則は色々ありますが、なるべく分かりやすい名前にしたほうがよいです。
命名規則や、組織内でルールを設けるなどして、class名に統一性を持たせることで保守性が上がります。
また、何かしらルールがあることでclass名を付ける時にいちいち迷わなくて済みます。
ちなみに私はボタン要素であればbtn、リンクの時はlnkと接頭辞をつけるなどしています。
まとめ
悪いコード、汚いコードはいずれ自分の首を締めますので、気をつけたいところです。
また、他の技術者にコードが分かりやすいとか綺麗と褒められると嬉しいですよね。
コードを書き始めて間もない頃は、コーディングの質に重きを置けないかと思います。
ですが、ある程度慣れてくると、可読性の高い・保守しやすいコードというのがどういうものなのか分かってくると思います。
そういうコードが書けるような、ワンランク上のコーダーを目指しましょう！
