概要
- ユーザーに対して親切なマークアップ
- コードを読む人に対して親切なマークアップ
この二点でみていきます。
ユーザーに対して親切なマークアップ
とにかくJSが必要なUIが出てきたら注意しましょう。
まず以下を見ます。大体のUIはこれを見れば解決しますし、これ以上に複雑なUIがあるなら実装をやめてUIを考え直したほうがいいかもしれません。
俺の考えたイケてるUIをユーザーが理解できると思い込まないようにしましょう。
学習コスト0で使えるUIがベストです。
ライブラリがあるなら使ってもいいかもしれませんが、デモコードをみて無駄にdivで実装されているものがあったら使わないようにしましょう。
アクセシビリティを学ぶ
これにつきます。
動いてたらいい はもう卒業しましょう。
コードを読む人に対して親切なマークアップ
roleのあるタグを使う
a, button, header, ulなどわかりやすいタグは可読性が高いので積極的に使っていきましょう。
そもそも意味のあるタグを使って文章構造を作っていくのがマークアップです。
divだらけのマークアップはアクセシビリティの面でも最悪です。
sectionタグを使う
よくある読みにくいマークアップとして、sectionタグをあまり使っていないというものがあります。
基本的に見出しタグとそれに関わるコンテンツはsectionタグで囲むようにしましょう。
これだけでかなり見通しのいいコードになります。
コンポーネント化できるのであればセクション単位で別コンポーネントに切り分けるのもおすすめです。
ここからここまでその前後と違う話してるな と思ったらsectionで囲いましょう。
これ単体で別のページにできるな と思ったらarticleにするのも検討しましょう。
セクションの中で導入となる部分にはheaderタグの使用もおすすめです。
見出しと導入分はデザイン的にもひとまとまりになっていることが多いので、headerタグに見出しと段落をいれると見やすいコードになります。
また、セクションは基本的にそのセクションがどこからどこまでの範囲を占めるのかを示すためにpaddingを指定しておくのがおすすめです。
背景色を敷かれた時に綺麗な見た目になるように意識してpaddingをつけるのがおすすめです。
sectionとsectionの間にmarginやgapを使うことはあまりないです。
paddingの考え方
sectionでも書きましたが、paddingがあたるエリアに仮に背景色が付いたら綺麗な見た目になるか を基準に考えるといいです。
marginやgapをつかうのかpaddingを使うのかはこれがいい基準になります。
いいデザイナーさんが作ったデザインはそもそも意識しなくても何で余白を作ればいいのか誘導してくれることが多いですね。
before afterを使わない
装飾のためにbefore, after擬似要素を使うことも多いかもしれませんが、
CSSやHTMLを見てそのbefore, afterが何を意味するのか理解するのが難しいです。
spanタグを置いてしまってクラス名を振ったり別コンポーネントに切り分けたほうが読みやすいコードになります。
CSSに意味を含める
例えば。
<p class="mt-4">段落</p>
<p class="mt-4">段落</p>
<p class="mt-4">段落</p>
わかりにくいです。
<div class="grid gap-4">
<p>段落</p>
<p>段落</p>
<p>段落</p>
</div>
こうしましょう。
Tailwind CSSを使っているときのコンポーネント編
上に書いた内容が活きてきます。
Tailwind CSSではユーティリティクラスを使用します。
ユニークなクラス名をつけることはあまりないので、どこまでが何を表すのかがわかりづらいHTMLが書かれてしまいがちです。
Tailwind CSSを使っているときは大体コンポーネントを作成できるライブラリやフレームワークがあると思うので、コンポーネント名に意味を含めるようにしましょう。
Tailwind CSSはクラス名の命名の手間がないことがメリットに上がることもありますが、読みやすいコードを書こうと思ったら命名はやはり必要です。
まとめ
- アクセシビリティを気にしてマークアップしよう
- sectionを使おう
- 余白につかうmargin, gap, paddingに意味を持たせよう
- ユーティリティクラスを使っているときはコンポーネントを細かく切って名前に意味を含めよう