An Introduction to CSS in JS: Thorough Analysis & Advantages
What is CSS in JS?
CSS in JS relates to the practice of including CSS in .js files. Writing CSS in global CSS files will not be efficient as the CSS files may be loaded in any order and may override the styles in any order. CSS in JS libraries helps bundle the Javascript components with their related CSS files and their dependencies, allowing components to run independently of external CSS files. Many such libraries are available, but few are related to specific javascript frameworks, and even fewer are frame-agnostic.
Advantages of CSS in JS:
Local Scoping:
Since style rules have a global scope, it applies to the entire application. Though we have now started modularizing CSS using methods like BEM, PostCSS, etc., CSS in JS libraries provides a great way of automatic local scoping, giving high predictability over the CSS code.
Reusability:
By bundling CSS with Javascript components, we can reuse the styles of the components efficiently.
Dynamic Styles:
By including CSS in JS files, we can render the styles dynamically based on the requirement and take advantage of native JS syntax features. This simplifies implementing a complicated design as we can use conditionals, state-based rendering, loops, etc., to apply the styles.
Generates Unique Selectors:
These libraries apply the styles to an element by adding a unique dynamic className to the element. In this way, we can eliminate the CSS specificity problems.
One of the popular framework-agnostic modules to use CSS in JS is the aphrodite npm module.
In this blog, we will look at a small illustration of how aphrodite works.
To begin with, let us create a simple react button component.
This button uses inline styles defined in style objects. On inspecting the element in the console, we can see that styles are added in line with the style attribute in the button element.
The code will look as follows when converting the same to use aphrodite:
We wrap our styles inside a call to StyleSheet. We create a method and define an object key button to represent the styles.
Instead of assigning to style, we use className, and we call the CSS method passing in styles.button
On running the program, the output looks the same as before. But, on inspecting the element, we can note that a class is added to the button, and also a style tag is added which contains all the styles defined by us.
Aphrodite parses our code, turning it into CSS and injects it into the DOM. It also uses the object key button to generate a unique class name (button_leq016), which is passed as the className attribute.
Summary:
Apart from the above discussed one, there are several other framework-agnostic libraries like JSS, Emotion, babel-plugin-CSS-in-js, etc. Besides having many advantages, there are a few downsides which we should be aware of before using these libraries. Internet Explorer allows Javascript to be embedded within CSS. Hence we should cautiously sanitize any input from the browser before applying it to the styles. The other drawback is we will not be able to use any CSS tools associated with linting, as the styles are written in JS files.
With Payoda, you can find the best HTML CSS Javascript services you need to help you successfully meet your project planning goals and deadline. Talk to us now.
Blog Authored by: Shiny Matilda Christina Joseph and Nandhini Meenal Balasubramanian
