Philosophy

Semtx: Semantic Classes

<div class="form-group">
  <label class="form-label">Email</label>
  <input class="form-input">
</div>

<button class="btn btn-primary">Submit</button>

<div class="card">
  <header>Title</header>
  <div class="card-body">Content</div>
  <footer>Actions</footer>
</div>

Why It Matters

Semantic class names describe what an element is, not how it looks. This creates code that is easier to read, maintain, and collaborate on. When you use .btn-primary instead of a dozen utility classes, your intent is clear.

For AI coding assistants, semantic classes provide context that utility-first frameworks cannot. An AI can immediately understand that .card is a container component, whereas flex p-4 rounded-lg shadow requires the AI to mentally assemble these into a component pattern.

• Readable - Class names reveal purpose
• Maintainable - Changes propagate automatically
• AI-Friendly - Coding agents understand intent
• Portable - Works across projects
• Accessible - Semantic = accessible by default
• SEO-Friendly - Search engines understand structure
• Consistent - Uniform patterns across codebase

Semtx Works with Native Elements

<main>
  <article>
    <header><h2>Title</h2></header>
    <p>Content...</p>
    <footer>Author info</footer>
  </article>
  
  <aside>
    <nav>...</nav>
  </aside>
</main>

<figure>
  <img src="...">
  <figcaption>Caption</figcaption>
</figure>

Benefits of Semantic Elements

• <main> - Primary content region
• <article> - Self-contained content
• <section> - Thematic grouping
• <aside> - Sidebar content
• <header> - Intro/navigation
• <footer> - Footer info
• <nav> - Navigation links
• <figure> - Images with caption

Easier to Read

• Class names describe purpose, not appearance
• New developers understand code faster
• Code reviews are more efficient
• Self-documenting markup

Greater Visibility

• Component patterns are obvious
• Easy to search for all cards, forms, buttons
• Global styles in one place
• Consistent naming eliminates confusion

Consistent Code

• Same patterns everywhere
• No reinventing styling solutions
• Team-wide convention
• Easy to enforce standards

Example: Finding All Buttons

With Tailwind:

grep -r "bg-blue-500\|text-white\|px-4 py-2" .

With Semtx:

grep -r "btn" .

The AI Prompt Problem

AI-Friendly Patterns

<div class="form-group">
  <label class="form-label">Email</label>
  <input type="email" class="form-input">
</div>
<div class="form-group">
  <label class="form-label">Password</label>
  <input type="password" class="form-input">
</div>

Component Discovery

AI agents can easily find all components by searching for class names like .card, .btn, .form-input. No need to search for scattered utilities.

Consistent Changes

When you ask an AI to "update all buttons to use the new primary color", it only needs to change --primary in CSS. With Tailwind, it must find every bg-blue-500 pattern.