![]() When considering Single Page Apps ( SPAs) - where the HTTP server only delivers an initial empty HTML page and all rendering is performed in the browser - Server-Side Rendering ( SSR) might not be very useful. This feature is invaluable for component-based development. With this feature built-in, we never have to worry about CSS class name collisions, specificity wars, or wasted time spent coming up with unique class names across the entire codebase. All styles are scoped to their respective component, providing encapsulation without affecting any styling defined outside the component. Scoped CSSĪll CSS-in-JS libraries generate unique CSS class names, a technique pioneered by CSS modules. Most actively maintained libraries that tackle CSS-in-JS support all the following features, so we can consider them de-facto. If you’re looking for a more elementary post, you can check out “An Introduction to CSS-in-JS.” Common CSS-in-JS features Note: We assume that if you’re here, you’re already familiar with CSS-in-JS. This will help us to better understand which one fits best for a specific use case. So instead of reviewing each library individually, we’ll analyse the features that stand out the most. We found that, although each library provides a diverse set of features, many of those features are actually commonly shared between most other libraries. We tested 10 different libraries, which are listed here in no particular order: Styled JSX, styled-components, Emotion, Treat, TypeStyle, Fela, Stitches, JSS, Goober, and Compiled. Why? Because there are more than 50 libraries out there, each of them offering a unique set of features. ![]() Wondering what’s even more challenging than choosing a JavaScript framework? You guessed it: choosing a CSS-in-JS solution.
0 Comments
Leave a Reply. |