Unpopular code standard about a pit of succes of “CSS in Javascript”

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!

CSS-in-JS libraries have been gain attraction since component-based JavaScript frameworks appeared in front-end development. Angular, React, Vue, and other frameworks are all based on modules called “components” from which you can build up an entire single-page application (SPA).

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.

But then again some of you might said the code was same & counter-productive. Well, it can be happend if CSS-in-JS libraries wasn’t designed effectively. A well designed CSS-in-JS can solve all the problems, in fact a JavaScript library that bundles each JavaScript component with all its belonging CSS rules and dependencies

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`
color: palevioletred;
font-size: 18px;
`;

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

In summary, CSS-in-JS is some preferences for your code styling and architecture. It depends on how you look at your code and what you think about your code, If you are using a JavaScript framework to build a web app with components, CSS-in-JS is probably a good fit. Especially if you are part of a team where everybody understands basic JavaScript. Its your choice! So create your own

And once again all is right in the world!

Hope this was helpful for your insight!

References :

Software Engineer who got D score in Introduction to Programming at college 👨‍🎓🧑‍💻