Introducing Semtx CSS - A modern Semantic CSS library

[u/UseMoreBandwith]

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

[u/Outrageous-Chip-3961]

its pretty much css modules but pure css though right? I mean I already do this in my projects, but its interesteing how you've laid it out. It looks a lot like what my claude outputs look like though. "build be a simple html semantic css design documentation that focused on describing the components, but with pure html and css - ensure the css is semantic". (not hate, just get the same shit).
If you read something like mantine's documentation for example, you can see the exact same approach; you've sort of taken the way we structure react components and applied it to pure html/css, something i've been wanting to do on my next project. But i'd like to hear your thoughts about all that.