|15 days ago||about 1 month ago|
|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.
React: Using native dialogs to make a modal popup
3 projects | dev.to | 19 May 2022
First of all I'm using Sass and CSS Modules if you've seen some of my earlier posts you'll have seen I used to use styled-components and whilst I think they have their place I'm much happier using CSS Modules.
how to create a scope CSS class from an existing third-party library (to avoid global class names conflict)?
1 project | reddit.com/r/AskProgramming | 11 May 2022
I'm using react and electron, if matters... I'm reading the docs of styled-components but I still couldn't figure out how to scope existing third-party libraries.
Having trouble understanding lifecycle component and how to use it
1 project | reddit.com/r/reactjs | 11 May 2022
You don't have to use CSS files, you can use libraries such as styled-components that allow you to create reusable styled components:
How to work with styled components in my react app?
1 project | reddit.com/r/codehunter | 10 May 2022
I had trouble naming this question and it seems quite broad, so, forgive me oh moderators. I'm trying out styled components for the first time and trying to integrate it into my react app. I have the following so far:
React Native Styling
2 projects | reddit.com/r/reactnative | 4 May 2022
PurgeCSS & styled-components: Does It Work?
17 projects | dev.to | 29 Apr 2022
Here at Anvil, we use styled-components. PurgeCSS functionality is essentially baked into styled-components, with a few caveats. If PurgeCSS is already included in styled-components, can you still use both? And if you can, is there any benefit to doing so?
Got Messy Spaghetti Stylesheets? 4 Techniques for Managing CSS Complexity
6 projects | dev.to | 29 Apr 2022
CSS-in-JS category of tooling (JSS, Styled-Components, etc.) does 'inline++' styling, which also has the added benefit of placing style information right next to template.
React Styled Components - How to access raw html
1 project | reddit.com/r/codehunter | 23 Apr 2022
I have a ref on a component I am converting over to a styled component in my app. The ref is used to access the offsetHeight and scrollHeight properties on the raw html element of the component. Once I switched this component to a styled component, the ref now points to the styled component instead of the raw html element, and I'm unsure how to reference the base element. Can this be done?
Introducing Full-stack Plugins
2 projects | dev.to | 21 Apr 2022
Let's say that you are a happy user of styled-components. Everything is great until you decide to adopt integrate server-side rendering (SSR). Getting something like this set up has huge benefits:
Apredendo React - The Roadmap!
10 projects | dev.to | 19 Apr 2022
A recruiter asked me this.
1 project | reddit.com/r/ProgrammerHumor | 3 Mar 2022
React is pretty much its own language at this point. With J/TSX. Not even CSS is immune to react's approach of "what everything was proprammatically generated divs?", case and point https://www.styletron.org
Tailwind CSS v3
9 projects | news.ycombinator.com | 9 Dec 2021
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; 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 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 vs hyperlocal development workflows interact with your organization's design culture.
5 React.js UI Component libraries.
9 projects | dev.to | 11 Aug 2021
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
 https://www.styletron.org/  https://baseweb.design/blog/getting-started-with-styletron#getting-started-with-styletron
@blocz/react-responsive v3 is out
3 projects | dev.to | 12 Mar 2021
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.
What are some alternatives?
styled-jsx - Full CSS support for JSX without compromises
emotion - 👩🎤 CSS-in-JS library designed for high performance style composition
chakra-ui - ⚡️ Simple, Modular & Accessible UI Components for your React Applications
PostCSS - Transforming styles with JS plugins
material-ui - MUI Core (formerly Material-UI) is the React UI library you always wanted. Follow your own design system, or start with Material Design.
Aphrodite - Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation
react-bootstrap - Bootstrap components built with React
React CSS Modules - Seamless mapping of class names to CSS modules inside of React components.
linaria - Zero-runtime CSS in JS library