styletron
classnames
Our great sponsors
styletron | classnames | |
---|---|---|
5 | 93 | |
3,321 | 17,316 | |
-0.1% | - | |
6.5 | 8.3 | |
3 months ago | about 7 hours ago | |
TypeScript | JavaScript | |
MIT License | MIT License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
styletron
-
Tailwind CSS v3
Some technical thoughts as someone who could care less about fanboyism:
- One point where atomic CSS frameworks are supposed to shine over conventional CSS is bundle size, since they (at least the good ones) compile to only a single rule for any used value, rather than potentially repeating rules for semantically different classes.
- Another point where atomic CSS frameworks shine is just sheer volume of banging code out. When the bulk of your output is visual, mastering tools based on shorthands like tailwind, emmet, etc can feel very productive.
- Purely atomic CSS frameworks can make some workflows more difficult, e.g. by having too granular call sites and not allowing "let's see what happens to the overall theme if I do this design change" iterative style of work, or because workflows that edit CSS on the fly via browser devtools can no longer be used to limit impact within semantic lines (e.g. "I want to change padding only on buttons, without breaking everything else that happens to depend on the same padding value"). There are both design-oriented and debugging-oriented workflows that are affected in similar ways.
- You generally don't get visual regressions at a distance w/ atomic CSS. This matters at organizations where desire for pixel precision and simultaneously fickle design teams are the norm. But conversely, "can we just change the font size to be a bit bigger across the site" can often run into issues of missed spots. On a similar note, designs may become inconsistent across a site over time due to the hyper local nature of atomic CSS oriented development.
- Custom rules may as well be written in APL[0]; they usually aren't documented and it takes a "you-gotta-know-them-to-know-them" sort of familiarity to be able to work with them (or get back to them after a while).
- There are some tools that mix and match atomic CSS with other paradigms. For example, styletron[0] can output atomic CSS for the bundling benefits, but looks like React styled components from a devexp perspective, and has rendering modes that output traditional-looking debug classes for chrome devtool oriented workflows.
The main theme to be aware of: proponents rarely talk of maintenance, so beware of honeymoon effect. Detractors often omit that traditional CSS (especially at scale) also requires a lot of diligence to maintain. So think about maintenance and how AOP[1] vs hyperlocal development workflows interact with your organization's design culture.
[0] https://www.styletron.org/
[1] https://en.wikipedia.org/wiki/Aspect-oriented_programming
-
5 React.js UI Component libraries.
It is created, managed, and utilized by Uber. It includes a wide range of attractive components, with accessibility as the top focus. It is quick since it is built with the Styletron engine. Style overrides can be used to tweak themes, but in my experience, I've never required them because the design vibe they're trying for is precisely what I want.
-
Just-In-Time: The Next Generation of Tailwind CSS
[0] https://www.styletron.org/ [1] https://baseweb.design/blog/getting-started-with-styletron#getting-started-with-styletron
-
@blocz/react-responsive v3 is out
When we created the library, we were using styletron for our styles, and we wanted to bind the breakpoints we defined in @blocz/react-responsive with the breakpoints used for our styles.
classnames
-
The 20 most used React libraries
classnames: Makes dynamic CSS class application a breeze. Learn more
-
Beyond the Basics: Exploring TailwindCSS and Linaria in Next.js - From Installation to Performance Optimization
But of course, it is a button, so it could have multiple variants: primary and secondary(you can increase the number of customizable params, but we will limit it to 1, variant). To implement this you can use any library for combining classnames, for example, classnames, clsx. Let’s use the classic one, "classnames".
-
Is it okay to split long lists of class names across multiple lines? Why don't you?
Use classnames and you can comma delimited your class names where needed.
-
Creating an Image Upload Modal with Crop and Rotate Functionality in React
To get started with our image modal implementation, i'll assume you already have a React project set up. For UI i’m using Tailwind CSS. But you can use any UI library as your wish. For the image cropping and rotating functionality, we'll be utilizing the react-easy-crop library. This library provides a simple and intuitive way to crop and interact with images and videos within a React component. We will also use the heroicons and classnames libraries in our tutorial. To install all the libraries and their dependencies, open your terminal and navigate to your project's directory. Run the following command:
-
TailwindCSS & Template Literals
Save yourself some headache and use https://github.com/JedWatson/classnames
-
Type Safe Tailwind and SCSS Modules
To use the global Tailwind types from styles/cssClasses.d.ts, I've leveraged a lot of work from this post, so credit goes there for a lot of the complex TypeScript wizardry that makes things work. In essence, it builds upon the classnames (or clsx) to provide a helper function that gives us with the type safety we're after. This cleverness means we get type checking that works with whitespace, multiple classes (e.g., "container p-5")and arbitrary values (e.g., "border-[5px]"). The input "container p-5 invalid-class" provides the nifty error message:
-
Is there any way to apply different CSS files to the same component?
Note: you don't need separate CSS files. Have one CSS module file that contains the variations a button can have, and then pass those variations in as props. You can use a library like classnames to help you out.
-
Dobar primer kako raditi dinamicki CSS sa Next.js i Tailwind?
Nisam do sad ovo video, al deluje slično kao classnames. Nisam do sad naleteo na situaciju da mi ne paše
- Vercel claiming credit for making Webpack
-
My very first React project
Just why... with conditionals like that, you can use the classnames lib and make it so much more elegant.
What are some alternatives?
clsx - A tiny (239B) utility for constructing `className` strings conditionally.
styled-components - Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
tailwind-merge - Merge Tailwind CSS classes without style conflicts
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
linaria - Zero-runtime CSS in JS library
React CSS Modules - Seamless mapping of class names to CSS modules inside of React components.
vite-plugin-sass-dts - This is a plugin that automatically creates a type file when using the CSS module type-safely.
Fela - State-Driven Styling in JavaScript
Radium - A toolchain for React component styling.
Tailwind CSS - A utility-first CSS framework for rapid UI development.