Top 3 utility-css Open-Source Projects

basscss

6 5,829 0.0 CSS

Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library
Atomizer

17 1,525 9.1 JavaScript

A library to create small, reusable CSS that scales as your website grows.

Project mention: Are you still using the ternary operator to dynamically apply Tailwind styles? | dev.to | 2023-09-09

Tailwind CSS is a CSS framework that has gained incredible popularity, with usage skyrocketing 40% in three years, according to the State of CSS 2022. It offers benefits such as development speed, maintainability, and gzip optimization. As a result, it is expected to exceed 50% in the 2023 survey. However, the readability of Tailwind CSS decreases sharply as the style becomes more complex, which is a typical disadvantage of the utility-first approach. Personally, I recommend my library, CSS Lube, but in this article, I would like to introduce some simple tips that can improve the developer experience when using the Atomic CSS approach.

InfluxDB

www.influxdata.com sponsored

Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.
truss

5 31 6.3 TypeScript

A TypeScript DSL for writing utility CSS in React/JSX (by homebound-team)

Project mention: StyleX – Meta's Styling Library | news.ycombinator.com | 2023-12-05

Nice! We copied StyleX's "type-safe extensions" in Truss [1] so things like `` are allowed (setting margin is fine) while disallowing `` (anything "not margin") that would mess up the components internal impl details with a compile error.
That said, we don't actually use the feature that much, vs. higher-level logical props like ``.
I know we're supposed to use build-time CSS-in-JS these days, but afaiu they don't support the rare-but-handy "just spread together ~4-5 different object literals from ~random different conditionals + props", i.e. intermixing styles some inside the component + outside the component, which emotion handles really well.
Basically this [2]. StyleX says it does "cross-file styles"...but can it support that? I kinda assume not, but I'm not sure.
[1]: https://github.com/homebound-team/truss#xstyles--xss-extensi...
[2]: https://github.com/homebound-team/beam/blob/main/src/compone...

NOTE: The open source projects on this list are ordered by number of github stars. The number of mentions indicates repo mentiontions in the last 12 Months or since we started tracking (Dec 2020).