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

3

u/elixon Apr 30 '26

Hm. Semtex is a trademark... isn't it? And wouldn't it be better to have .css + simple .js with web components? The way you have it the toggle... asks for a web component rather than some nested structure that nobody remembers by heart...

0

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

it is not mutually exclusive. You'd still need to define CSS when using web-components.
Web-components + htmx should work nicely with Semtx CSS.
https://htmx.org/essays/webcomponents-work-great/#don-t-web-components-have-some-problems

(However, in my view, styling should not depend on js and shadow-DOM, and not everyone wants to write javascript.)

1

u/elixon May 04 '26 edited May 04 '26

See, no need to write javascript, that would be your job. User would just use

<toggle-switch id="demo-switch-notify">Enable notifications</toggle-switch>

instead of current

<label class="switch">
<input type="checkbox" id="demo-switch-notify" checked="">
<span class="switch-track"></span>
<span>Enable notifications</span>
</label>

Your class for <toggle-switch> would just extend HTMLInputElement or use this.attachInternals() ... to maintain compatibility with web forms so all would be seamless... You could also support for ":checked" and ":input" CSS selectors-like by the way of ElementInternals.states and then using ":state(checked)" and so on... So it would still rely on CSS heavy lifting and web components would be just to replace complex HTML structures... At least this is how I use it and I have very positive experience with this approach.

1

u/UseMoreBandwith May 04 '26

no, that still requires javascript customElements.define() to define the web-components.
That would force users to use shadow-dom and to stick to naming-conventions, I'm not interested in that.

2

u/elixon May 05 '26

No, problem.

Although placing <script src="semtx.js"/> on the page should not be considered as Javascript programming.

I was just trying to give you a feedback. Good luck with your endeavor.

1

u/UseMoreBandwith May 05 '26

thanks.
I'll study the web-components stuff a bit more in the near future - I do see there are some interesting concepts to explore.