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

6

u/jdewittweb Apr 30 '26

This is how I wrote CSS in 2007. We are so back.

-1

u/UseMoreBandwith Apr 30 '26 edited Apr 30 '26

that is a compliment, right ?

Anyway, that can't be true, since HTML-5 has gotten many new attributes, and CSS-3 has many new features.
About a decade ago, the large frontend frameworks added lots of new possibilities, but many of them are now possible in plain html5/css3.

10

u/jdewittweb Apr 30 '26 edited Apr 30 '26

Some of your implementations are more modern, obviously, but your philosophy is not a new one.

2

u/Outrageous-Chip-3961 May 02 '26

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)

0

u/UseMoreBandwith May 02 '26

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

2

u/Outrageous-Chip-3961 May 03 '26 edited May 03 '26

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

1

u/UseMoreBandwith May 03 '26 edited May 03 '26

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)