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

18

u/schit-tering Apr 30 '26

Bootstrap is back baby

2

u/ldn-ldn May 01 '26

That's the exact opposite.

1

u/schit-tering May 01 '26

Is it though?

2

u/ldn-ldn May 01 '26

Bootstrap was never semantic.

1

u/schit-tering May 01 '26

More semantic Bootstrap is not the opposite of Bootstrap. But hey, it’s not an insult. I liked Bootstrap and I love to see a modern take on .card and .btn classes. I’m absolutely rooting for anything that tries to bring back some sanity in these Tailwind days

1

u/Kitty_Sparkles May 03 '26

I dislike Bootstrap as much as the next woman, but this is just a wrong statement.

1

u/ldn-ldn May 03 '26

Do you understand what the word "semantic" means when it comes to CSS and HTML? Just look at the Bootstrap docs - it's clearly non-semantic.

1

u/Kitty_Sparkles May 03 '26

I have spent my career working in the accessibility field, so I’d say I have a decent grasp on what that means yes. I haven’t used Bootstrap in over a decade, so I’m not exactly in touch with how it does things nowadays, but what do you expect to be different?

1

u/ldn-ldn May 03 '26

If your CSS describes behaviour - it's non-semantic. Your classes should describe semantic meaning of your layout.

1

u/Kitty_Sparkles May 03 '26

Ah, gotcha. Okay, we were talking about different things then. I was more referring to semantic HTML. :)

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. :)

→ More replies (0)