This article might be some reference how code can be implement, there is always another simplier way or easiest way to write CSS globally and effectively. There’s no thing such as true or false, its your own styles.
CSS-in-JS libraries provide us with a new approach for writing CSS. They aim to tackle the limitations of CSS, such as the lack of dynamic functionality, scoping, and portability. In spite of its advantages, CSS-in-JS is a controversial technology, as many developers ask if it’s worth further complicating front-end development.
This article intend to give you a high-level overview of CSS-in-JS libraries. We’ll look at that libraries which problem they solved!
But, how should you style SPA components effectively??
Due to the cascading nature of CSS (Cascading Style Sheets), stylesheets can load in any order and override each other in any combination. Managing dependencies is another problem when it comes to styling SPAs.
Why i like CSS in JS?
Its boosts my confidence. I can add, change and delete CSS without any unexpected consequences. My changes to styling the components will not affect anything else. If i delete the components, then i delete the CSS too. No more Append-Only Stylesheets
Here’s some CSS-in-JS code
Or on a simplier way like this, in React way
import styled from "styled-components";
const Title = styled.h1`
const App = () => <Title>Hello World!</Title>;
The Advantage CSS in JS
Let’s talk the advatange of CSS in JS based on my point-of-view (POV)
Confidence : Add, change and delete CSS without any unexpected consequences and avoid dead code.
Painless Maintenance: Never go on a hunt for CSS affecting your components ever again
If you cant expect anything from your team members, its a good practice to do CSS-in-JS , especially when there’s Junior in your teammates. Its take a lot of time to have a deep understanding in CSS , since there’s a lot of standaritation of how CSS code can be implemented. It avoid frustation & time to find used CSS.
Enhanced Teamwork: Avoid common CSS frustrations to keep a neat codebase and moving quickly, regardless of experience levels.
Fast Performance: Send only the critical CSS to the user for a rapid first paint.
Dynamic Styling: Simply style your components with a global theme or based on different states.
It might be sound crazy, while the rest of the world might be implementing CSS separately, but this some of reference how CSS can be implemented through next level. Sometimes it might be DRY if you can’t evolve your code anymore, through many hundreds or thousand lines of code. CSS-in-JS guides me to pit of succes
And once again all is right in the world!
Hope this was helpful for your insight!
rachfiandj07 - Overview
Bukan engineer terbaik bangsa Indonesia a comparison of fetchin API using React Lifecycle vs Opensource lib Axios…