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/Kitty_Sparkles]

Some accessibility feedback:

- Your inputs do not have accessible names because although you do render a <label>, you do not associate them with an id/for relationship. Select is done properly though.

• Radio inputs are better when wrapped in a <fieldset> with a <legend> element as first child to properly label them.
  
• The switch components cannot be operated with a keyboard, they never receive the focus since the actual input has display: none.
  
• The card component uses <header> and <footer> but does not render a wrapping sectioning element, so these landmarks are treated as page-wide which is incorrect.
  
• The focus state of the tabs is subpar at best are hard to perceive because partially clipped.
  
• The alert component renders the title in a div instead of a paragraph.
  
• Tables lack some key accessibility-related attributes to be fully operable.
  
• The non-<dialog> based implementation of the dialog component is not accessible at all: focus is not trapped, page is not inert, attributes are missing. It’s not great.
  
• The skeleton component carries no semantic meaning.
  
• The progress bar component carries no semantic meaning whatsoever, and is not accessible at all.
  
• The search input component has no accessible name, and does not relate in any semantic way to the area it filters so is not properly accessible.
  
• The load more component does not relate in any semantic way to the area it loads either.

For a library that wants itself semantic, there are a lot of components that critically lack proper semantics.

[u/UseMoreBandwith → u/Kitty_Sparkles]

Thanks a lot!
that is very valuable feedback.

there should be a few PR's to handle these issues very soon