Styled-components has been at the forefront of CSS-in-JS for years, but it's worth exploring today's new, feature-rich alternatives: Linaria, CSS Blocks by LinkedIn, Stitches, Styletron, Emotion, Fela, Goober
Styled-components has been at the forefront of CSS-in-JS for years, but it's worth exploring today's new, feature-rich alternatives.
We have seen CSS-in-JS become an essential part of modern frontend development in the past few years. According to styled-components creator Max Stoiber, around 60 percent of React installs also install a CSS-in-JS library. The adventure that began with JSS in November 2014 is now relatively stable, with styled-components acquiring a large chunk of the CSS-in-JS market.
Here, we will be sharing some cool alternatives to styled-components that provide great value and could become the CSS-in-JS library for your next app.
One of the drawbacks of CSS-in-JS libraries is the runtime cost, as most of them add and remove styles from the
<style> tag when DOM elements are changed.
Linaria solves this issue by extracting all CSS in files during the build. Another fabulous feature is that all dynamic styles are applied using CSS variables, which lead to total independence from any runtime.
That does come at a cost, however — dynamic styling is not available in browsers that don’t support CSS variables. Linaria also supports Sass-like syntax for nested styles.
As for developer experience, it supports stylelint and also provides a CSS source map for a seamless debugging experience. It also has a Babel loader with a webpack guide, a Rollup plugin, and Gatsby, Svelte, and Preact guides.
If you’re planning to move from styled-components, Linaria has a styled helper, making it easy to switch. linaria/react also supports dynamic styles with a styled-components-like syntax.
One of the core challenges for styling libraries today to find the best tradeoff between performance and maintainability. CSS Blocks envisions to give the best of both. CSS Blocks is inspired by CSS Modules, BEM, and Atomic CSS.
Best of all, CSS Blocks is statically analyzable. It can look at your codebase and analyze which parts of your CSS are used, unused, or conditionally used. It divides all of the rules in CSS into unique groups without repetitions. It allows you to keep your CSS more maintainable for yourself and other developers and better optimized for your end users.
CSS Blocks offers a new model as compared to styled-components or similar styling libraries. Some teams may take some time to learn and adapt to it, but the performance and maintainability gains make it worthwhile.
Its maintainers describe Stitches as a styling library with near-zero runtime, server-side rendering, multi-variant support, and best-in-class developer experience. As compared to Linaria and CSS Blocks, Stitches is closer to styled-components when it comes to architecture. With a smaller size than styled-components, it provides much of the same functionality with a similar API.
The best part of Stitches is variants, which help in developing better component APIs. You can define styles for each variant and also combine them. It also uses CSS variables for theming; this allows it to avoid runtime props interpolation, providing a decent performance boost compared to other styling libraries available.
Another beautiful feature is tokens, which enable you to declare variables and use them as CSS values — yes, even in shorthand. Also, the switch from styled-components is relatively seamless as their APIs are quite similar.
Developing libraries and components that work well with any UI library or framework is something that all frontend devs look for today. Styletron, being library-agnostic, allows you to write components that work well with any UI library, be it React or any other.
Styletron is good for both Atomic CSS and critical rendering paths. It adds only required CSS to style tags and performs declaration-level de-duplication, which reduces the size of CSS that the browser has to process. You get all this in a tiny, 8KB gzipped library. As for developer experience, it doesn’t require any bundler configurations or tooling setup.
Article covers: How native is react native?, React Native vs (Ionic, Cordova), Similarities and difference between React Native and Native App Development.
Want to develop a website or re-design using CSS Development? We build a website and we implemented CSS successfully if you are planning to **[Hire CSS Developer](https://hourlydeveloper.io/hire-dedicated-css-developer/ "Hire CSS Developer")**...
Look at three different React code examples from a beginner, intermediate, and advanced web developer. How senior developers think. How to use React state properly. How to use React useEffect properly. What to think about when programming. The differences between senior and junior developers
Have you ever thought of having your own app that runs smoothly over multiple platforms? React Native is an open-source cross-platform mobile application framework which is a great option to create mobile apps for both Android and iOS. **[Hire...