AI NewsOpen sourceAnnouncement
Sumi.css styles plain HTML in 6.7 KB with no classes
Sumi.css is a classless CSS framework that styles plain semantic HTML, including forms, tables, cards and modals, in one 6.7 KB gzipped file.
Image: GitHub
Why it mattersA prototype that reads like a finished page without touching class attributes removes a day of styling work from an internal tool or a landing page.
A new page can look finished before you write a single class. Sumi.css, a one-file CSS framework from Vladimir Carrer, styles plain HTML by tag name: headings, paragraphs, forms, tables, buttons, cards, accordions and modals all take their look from the element itself. The file is 6.7 KB when minified and gzipped, measured on the version served from the project's own CDN link. Show HN carried the project to 81 points this week, and the repository stands at 129 stars two days after it was first pushed on 20 October.
Classless is the whole idea. The README puts it as "Write plain, semantic HTML and it looks finished. Add a class only when you want something specific." That is a short list of things most CSS frameworks ask you to type. A navigation bar is a <nav> holding two <ul> groups. A card is an <article> with a <header> and a <footer> inside it. A modal is a <dialog>. The accordion is <details> and <summary>. Nothing in the quick start carries a class name until the page needs one.
Why your own CSS still wins
The second decision is quieter and more useful. Every element rule in Sumi uses the :where() selector, which has zero specificity. The README states what that gives the author: "your own CSS always wins without !important." A class or an inline style on top of a Sumi element overrides the framework by default, with no fight over selector specificity. Any team that has spent a day untangling !important chains knows the problem that solves.
Theming is a flat list of CSS custom properties: colours, type scale, radii and spacing. Light and dark mode switch on the visitor's system setting, and a data-theme attribute forces either mode for a page or any subtree.
What it will not do
The framework is new. Vladimir Carrer created the repository on 20 October and pushed the last commit the following day; nothing in it has been in production for long. There are no automated tests in the README, no browser support matrix beyond "modern browsers", and the component count is deliberately short. If you need pagination, data tables with sorting or a drag-and-drop list, this is not the library for that, and the README does not pretend otherwise.
It sits in a different category from a design system. Carrer calls it minimalist on purpose: a sensible default look that any brand can override. A production site with a specific brand voice will still write real CSS on top of it.
The real fit is a prototype, an internal tool, a documentation site or a landing page where the goal is readable, accessible markup styled without extra setup. For those, the choice between a classless framework and three days of typing btn btn-primary rounded-lg px-4 is now one line in the <head>.
Source
This item was written by an AI system from the linked source. Reveneau is responsible for what it publishes.
Get AI News in your inbox
New developer tools, model and agent releases, and how teams are actually using them to release software. Short, and only when there is something worth reading.