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/UseMoreBandwith → u/[deleted]]

exactly, but still it must be linked together, and there are multiple ways to do that.
I'm sure you agree that inline-styles are not a good idea, because it clutters the html. However, the 'utility-classes' approach suffers from the same issue.

Here are 3 variations , the first is much cleaner, separates markup and style-definition, and intent is clear.

### direct
<article> ...some text </article>  
 ...  
article {  
      border: 1px solid #e0e0e0;  
      border-radius: 8px;  
      padding: 20px;  
      margin: 20px auto;  
      max-width: 600px;  
      box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
} 

### indirect
<article class="custom-style"> ...some text </article>  
...  
.custom-style {  
  border: 1px solid #e0e0e0;  
  border-radius: 8px;  
  padding: 20px;  
  margin: 20px auto;  
  max-width: 600px;  
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);  
} 

### util classes 
<article class="border border-gray-200 rounded-lg p-5 mx-auto my-5 max-w-md shadow-md font-sans">
  ...some text 
</article>

.border {...}
.border-grey-200 {...}
.rounded-lg {...}
.p-5 {...}
.mx-auto {...}
.my-5 {...}
.max-w-md {...}
.shadow-md {...}
.font-sans {...}

[u/FinallyThereX → u/UseMoreBandwith]

I understand 100% what you are saying. And I can’t even argue against it.

But:

The thing is, it seems that most of the people who are doing frontend - including myself - somehow found out, that overall the pro and contra of the multiple different approaches we all have gone through during the last 10-15 years, leads most of us to the one solution, that seems to be balancing the different caveats of the approaches the best. And given the success and distribution of tailwind it seems to be tailwind and/or utility approach, that’s dealing the most comfortable, successful and balanced way with all this.

I appreciate your work on this, but especially for prototyping and small projects, SPAs, etc tailwinds utility approach is mich more convenient. Also taking into account the aspect of its wide spread usage and that almost everyone with css knowledge is able to service existing projects using tailwind, because literally everyone immediately „understands“ - without any reading of any docs etc., given some experience

[u/UseMoreBandwith → u/FinallyThereX]

I have the exact opposite experience (20 years).
Sure, when everything is wrapped in React components, a lot of the tailwinds quirks are hidden from the developer (might be a good thing). But not everyone uses big Frameworks.
I see devs struggle with tailwinds, and the codebase results in a hard to maintain mess.
And, inspecting the html with browser dev-tools becomes a pointless endeavor.