ちょっと親切なマークアップ #アクセシビリティ

概要

この二点でみていきます。

とにかくJSが必要なUIが出てきたら注意しましょう。

まず以下を見ます。大体のUIはこれを見れば解決しますし、これ以上に複雑なUIがあるなら実装をやめてUIを考え直したほうがいいかもしれません。
俺の考えたイケてるUIをユーザーが理解できると思い込まないようにしましょう。
学習コスト0で使えるUIがベストです。

ライブラリがあるなら使ってもいいかもしれませんが、デモコードをみて無駄にdivで実装されているものがあったら使わないようにしましょう。

これにつきます。
動いてたらいい　はもう卒業しましょう。

a, button, header, ulなどわかりやすいタグは可読性が高いので積極的に使っていきましょう。
そもそも意味のあるタグを使って文章構造を作っていくのがマークアップです。

divだらけのマークアップはアクセシビリティの面でも最悪です。

よくある読みにくいマークアップとして、sectionタグをあまり使っていないというものがあります。

基本的に見出しタグとそれに関わるコンテンツはsectionタグで囲むようにしましょう。
これだけでかなり見通しのいいコードになります。

コンポーネント化できるのであればセクション単位で別コンポーネントに切り分けるのもおすすめです。
ここからここまでその前後と違う話してるな　と思ったらsectionで囲いましょう。

これ単体で別のページにできるな　と思ったらarticleにするのも検討しましょう。

セクションの中で導入となる部分にはheaderタグの使用もおすすめです。
見出しと導入分はデザイン的にもひとまとまりになっていることが多いので、headerタグに見出しと段落をいれると見やすいコードになります。

また、セクションは基本的にそのセクションがどこからどこまでの範囲を占めるのかを示すためにpaddingを指定しておくのがおすすめです。
背景色を敷かれた時に綺麗な見た目になるように意識してpaddingをつけるのがおすすめです。

sectionとsectionの間にmarginやgapを使うことはあまりないです。

sectionでも書きましたが、paddingがあたるエリアに仮に背景色が付いたら綺麗な見た目になるか　を基準に考えるといいです。

marginやgapをつかうのかpaddingを使うのかはこれがいい基準になります。
いいデザイナーさんが作ったデザインはそもそも意識しなくても何で余白を作ればいいのか誘導してくれることが多いですね。

装飾のためにbefore, after擬似要素を使うことも多いかもしれませんが、
CSSやHTMLを見てそのbefore, afterが何を意味するのか理解するのが難しいです。

spanタグを置いてしまってクラス名を振ったり別コンポーネントに切り分けたほうが読みやすいコードになります。

例えば。

<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ではユーティリティクラスを使用します。
ユニークなクラス名をつけることはあまりないので、どこまでが何を表すのかがわかりづらいHTMLが書かれてしまいがちです。

Tailwind CSSを使っているときは大体コンポーネントを作成できるライブラリやフレームワークがあると思うので、コンポーネント名に意味を含めるようにしましょう。

Tailwind CSSはクラス名の命名の手間がないことがメリットに上がることもありますが、読みやすいコードを書こうと思ったら命名はやはり必要です。