less.js VS vanilla-extract

LESS [ https://lesscss.org ]

Traditionally CSS lacked features such as variables, nesting, mixins, and functions. This was frustrating for Developers as it often led to CSS quickly becoming complex and cumbersome. In an attempt to make code easier and less repetitive CSS pre-processors were born. You would write CSS in the format the pre-processor understood and, at build time, you'd have some nice CSS. The most common pre-processors these days are Sass, Less, and Stylus. Any examples I give going forward will be about Sass as that's what I'm most familiar with.

In the past, you’d need to rely on pre-processors such as SaSS or Less, but not anymore… Native CSS nesting has landed on all major modern browsers.

Consider using CSS preprocessors like Sass or Less not only for better code organization but also for potential performance improvements.

Extensions of CSS: for example, Sass, Less, Tailwind, CSS Modules, to make stuff look a certain way on your own.

LiveCodes provides many of the commonly used developer tools. These include Monaco editor (that powers VS Code), Prettier, Emmet, Vim/Emacs modes, Babel, TypeScript, SCSS, Less, PostCSS, Jest and Testing Library, among others. All these tools run seamlessly in the browser without any installations or configurations. It feels like a very light-weight version of your own local development environment including the keyboard shortcuts, IntelliSense and code navigation features.

LESS

The CSS Working Group had been aware of the need for CSS variables since its inception in 1997. By the late 2000s, developers had created various workarounds like custom PHP scripts and preprocessors like Less and Sass to compensate for this deficiency.

He could do with LESS

While we may disagree whether Sass is still relevant today, Mayank's case for using Sass in 2022 sums up the many use cases for Sass/SCSS including a timeline from 2006 (Sass) to "2022+" (nesting). Nesting CSS used to one of the few good reasons left to choose Sass, SCSS (or less) in a new web project.

In our experience, the best testing strategy for modern frontends is a combination of E2E testing (using Playwright+NextJS), and unit testing. Visual regression testing is not worth the effort in our opinion, especially with the advent of better CSS tooling like TailwindCSS and Vanilla Extract.

For building component libraries I’ve been a big fan of vanilla extract. Apparently it’s from the same people who made css modules

This sounds exactly like Vanilla Extract. https://vanilla-extract.style/

KumaUI : Another relatively new contender, Kuma uses zero runtime CSS-in-JS to create headless UI components which allows a lot of flexibility. It was heavily inspired by other zero runtime CSS-in-JS solutions such as PandaCSS, Vanilla Extract, and Linaria, as well as by Styled System, ChakraUI, and Native Base. ### Vue

The components are styled with CSS modules. When building the library, these styles will get transformed to normal CSS style sheets. This means that the consuming application will not even be required to support CSS modules. (In the future I want to extend this tutorial to use vanilla-extract instead.)

I do a lot of UI work and have never understood the appeal of Tailwind. It’s like relearning a new language. Tailwind was released in 2017. Maybe the CSS landscape wasn’t as good back then? Modern CSS is pretty awesome.

I’ve enjoyed using Vanilla Extract https://vanilla-extract.style/. It’s like css-in-js with none of the downsides as everything gets compiled to css.

Nah, I used enough Tailwind to know it becomes a spaghetti mess. I stick with CSS now, and in React I use https://vanilla-extract.style, compile time CSS in TypeScript.

Vanilla Extract is my current choice for the next greenfield project. I would also recommend checking out how and why this team integrated it with Tailwind.

I'm not trying to call a particular org or library out, because I think the ones I've been digging through (and prompted me to write this) are very high quality. It's vanilla-extract (a build-time CSS-in-JS library) and Braid Design System (built on vanilla-extract).

Apart from what has been suggested, there is also https://vanilla-extract.style/.