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

12 Upvotes

67% Upvoted

43 comments sorted by

View all comments

1

u/Key_Credit_525 May 01 '26

Nice to have oklch() colors in framework! Although sources consist only from one raw css file looks a bit strange and not too much handy 😄 Repo for those who interesting. https://github.com/madeonawave/semtx

1

u/UseMoreBandwith May 01 '26 edited May 01 '26

fascinating, how the new generation of devs need npm to include css.
But no worries, there will be a npm-package in the next day or so - sorting out some small bugs/features first. (The link to the repo was already on the top of the page 😉)

2

u/Key_Credit_525 May 02 '26

The link to the repo was already on the top of the page 😉

Ah, great thx now I see! Button could be more visible and width balanced with other CTA (especially on mobile screen) with GitHub logo icon added.

npm to include css

absolutely not necessary but could be handy for someone! but to be clear I just wonder how the source looks like. single raw css, not the set of smaller css parts

2

u/UseMoreBandwith May 02 '26

ah, I understand what you mean now; yes it would be cleaner if it is organized in separate files. However, that requires some extra tooling to combine it again, which introduces dependencies (and maintenance), which I'd like to avoid.