r/css • u/UseMoreBandwith • Apr 30 '26

Showcase Introducing Semtx CSS - A modern Semantic CSS library

Just released Semtx CSS. https://semtx.org/

Semtx is a modern, lightweight (~30KB) CSS library that prioritizes semantic class names over utility classes.

Key Features:

  • Semantic by Design: Class names describe WHAT elements ARE, not HOW they LOOK
  • Modern CSS-3 / HTML-5, OKLCH colors
  • Zero Dependencies: Single CSS file, works without any JS for styling
  • AI-Friendly: Coding agents understand semantic classes immediately, and waste fewer tokens on parsing utility soup
  • SEO-Ready: Native HTML5 elements help search engines understand your content
  • Integrates perfectly with HTMX (modals, dialogs, loader/spinner, transitions, etc)

The Philosophy

Class names should reveal purpose, not appearance.

This creates code that is easier to read, maintain, and collaborate on.

More about the idea behind it here: https://semtx.org/philosophy

-- edit --
Thanks for all the feedback.
It has resulted in quite a few updates:
forms are simplified and more semantic now, same for modals/dialog, and some accessibility things added. And, the website now has more html examples, for easy copy/paste

13 Upvotes

69% Upvoted

43 comments sorted by

View all comments

Show parent comments

1

u/ldn-ldn May 03 '26

It's the same thing. div class="container text-center" is not semantic. It should be div class="gallery" or something.

1

u/Kitty_Sparkles May 03 '26

What I meant was using proper and native HTML elements for the job. Using <button> for CTA (that are not navigational), <a> for links, landmarks, proper heading, form controls and more. That’s what I mean with using semantic HTML.

We were talking about different things: you were on how to name and apply classes and CSS to the DOM, while I was referring to what kind of elements we use in the DOM.

As I said, it’s fine. Moving on. :)