The New CSSSemantic CSS: readable HTML, real CSS, fewer hacks
Semantic-first means styling elements and meaningful classes instead of stacking utility classes on every element.
What is semantic CSS?
Semantic CSS means your markup describes content, not presentation. Elements like <article>, <nav>, and <header> carry meaning. Classes describe purpose, not appearance.
Before and after
Utility-heavy approach
<div class="flex flex-col gap-4 p-6 bg-white
rounded-xl shadow-md border border-gray-200
hover:shadow-lg transition-shadow duration-200">
<h2 class="text-xl font-bold text-gray-900
tracking-tight leading-snug">Title</h2>
<p class="text-sm text-gray-600
leading-relaxed">Description text.</p>
</div>Semantic approach (The New CSS)
<article class="p-6 bg-gray-100 rounded-lg shadow-md
hover:shadow-lg transition">
<h2 class="text-xl font-bold mb-2">Title</h2>
<p class="text-gray-600 text-sm">Description text.</p>
</article>Why semantic HTML matters
✓
Accessibility — screen readers understand semantic elements natively.
✓
Maintainability — readable markup is easier to review, debug, and hand off.
✓
SEO — search engines use semantic structure to understand your content.
✓
Less CSS — good defaults mean fewer overrides and less code overall.