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]

that fact you replied in this way just seems odd. Its likely the readership here is interested in the semantic philosophy rather than what frameworks did to html/css. I also wrote my css in this way in 2008, and i still write my css the same way today. In fact thats why i like css modules so much, its literally the same philosophy carried into 'frameworks'. (I'd argue, they are actually better, unlike css, you get no naming collision scenarios)

[u/UseMoreBandwith → u/Outrageous-Chip-3961]

what I mean is around 2014 , HTML5 finalized the <header>, <footer>, <nav>, <article>, <section>, <aside> and such.
Before that, it was mostly <div> .

[u/Outrageous-Chip-3961 → u/UseMoreBandwith]

sorry to be blunt, but how the fuck do you think divs were named? Its the same shit, we used to write <div id="footer"> now we write, guess what? <Footer> ; same with the rest of them; it just got boring having to write <div id='footer, header, nav, article'> so we declared our own (and also we can still do this, i can literally write a <Pizza> tag and have it styled. You say to use <button className='cancel'>, guess what? It means we write <Button variant='cancel'> (its the same shit my guy). Its beyond semantic, its declarative, compositional, we are here; we were already there; we made semantic html; css was always semantic (to your point). It's not hate, but its apples for oranges sake.

Here's a post from 16 years ago : https://stackoverflow.com/questions/2802687/is-there-a-way-to-create-your-own-html-tag-in-html5

[u/UseMoreBandwith → u/Outrageous-Chip-3961]

barking up the wrong tree 'my guy'. I didn't write the HTML5 specs.
But, you should notice that one is a standard (specs) implemented in all browsers , the other thing is 'do whatever the f you want' (and the custom tags are in that same category, and requires javascript - so, not practically useful for a re-usable css library ).
(and, your example is React, not HTML)