What is CSS-in-JS? – Technical Ripon

In 2015, a JavaScript library called JSS (which is still actively maintained) was launched, which allowed developers to use JavaScript to describe styles in a declarative, conflict-free, and reusable way. JSS will automatically apply the declared properties to their respective selectors after the page is loaded. As front-end JavaScript (JS) libraries like React gained popularity, they created a new CSS-in-JS solution called Styled-Components. What styled components and CSS-in-JS libraries like Emotion have in common is that they all allow web developers to write CSS properties for components via JavaScript. This web development tutorial will introduce some of the general features of CSS-in-JS and discuss its strengths and weaknesses. Finally, you should also know what to look for when choosing between CSS-in-JS, CSS libraries like Lace of SASS, and good ole vanilla CSS.

How does CSS-in-JS work?

As the name suggests, CSS-in-JS allows programmers to style their components by writing CSS directly in their JavaScript or TypeScript code. Of course, you can do this yourself by defining constants, as shown in the code sample below:

const styles = 
  background: "#FE0000",
  color: "#FFFFFF"
;

Then you just need to pass it through the element Style attribute, like this:

Although there is nothing wrong with using inline styles like this, this approach is severely limited because such simple objects lack many useful CSS features. For that reason, most developers choose to go with a library, of which there are many. Here is an example of a styled React button using styled components:

import React from "react";
import styled from "styled-components";

const StyledButton = styled.button`
  width: 90px;
  height: 40px;
  background: $props => props.active ? "black" : "darkgrey";
  color: blue;
`;

const Button = () => (
  
    My Styled Button
  
);

export default Button;

Note that we can set values ​​dynamically based on conditional values props,

To see: Learn JavaScript from scratch for $30

Framework-Specific Vs. Framework agnostic library

Now that we’ve established that using a CSS-in-JS library is beneficial, let’s examine two common types: framework-specific and framework-agnostic.

Some libraries, such as Radium and JSX, only work with a specific JavaScript framework. For example, Radium is built for React apps, while Styled JSX only supports components written in JSX (though it can be used with React as well).

Not surprisingly, framework-specific CSS-in-JS libraries use the same syntax for the framework they support. For example, Styled uses lexical templates within JSX syntax to add CSS styles to JSX components. Here’s an example of styled JSX code that creates a dynamically styled button:

const Button = props => (
  
    props.children
    
  
)

Other CSS-in-JS libraries like JSS, Emotion, and Styled Components are framework-agnostic, meaning you can use them with any component-based framework or even plain JavaScript. Other libraries such as Aphrodite also work with web components.

Here’s an example of a web component that Aphrodite uses to set the background color:

/* Registers a Web Component with blue background */
import  StyleSheet, css  from 'aphrodite';

const styles = StyleSheet.create(
    blue: 
        backgroundColor: 'blue'
    
);

class App extends HTMLElement 
    attachedCallback() 
        this.innerHTML = `

This is red.

`;
    


document.registerElement('my-app', App);

To see: bitbucket review

Benefits of CSS-in-JS

Whichever library you choose, they include the following features:

• Received CSS: All CSS-in-JS libraries generate unique CSS class names. In addition, all styles are aligned to their respective components, providing encapsulation without affecting styling defined outside the component. This obviously avoids CSS class name collisions, specification wars, and spending a lot of time coming up with unique class names throughout the application.
• Server-Side Rendering (SSR): While Server-Side Rendering (SSR) does not offer much advantage in Single Page Apps (SPA), it is extremely useful in websites or applications that need to be parsed and indexed by search engines as it requires both page and style generation on the server.
• Automatic Supplier Prefix: All CSS-in-JS libraries provide vendor prefixes out-of-the-box. This saves a lot of time because developers don’t have to figure out which features in older browsers require vendor prefixes.

Disadvantages of CSS-in-JS

CSS-in-JS is certainly not without drawbacks. There are instances where developers have abandoned this in favor of a more traditional CSS approach. Here are some reasons:

• runtime overhead: While the components are rendered, the CSS-in-JS library must convert the styles to plain CSS to be inserted into the document. There is some debate as to whether or not this can have a significant impact on application performance. This will probably depend on a number of factors ranging from code complexity to hardware.
• Big Bundle Size: Every user using your application will need to download the JavaScript for the CSS-in-JS library. Emotion is 7.9KB minizipped and the stylized components are 12.7KB. React + react-dom, by comparison, is 44.5kB, so a css-in-js library probably won’t be the straw that breaks the camel’s back.

Final Thoughts on CSS-in-JS

This tutorial introduced some of the general features of CSS-in-JS as well as its strengths and weaknesses. While CSS-in-JS offers many benefits, don’t jump on the CSS-in-JS bandwagon too quickly just because all your friends are doing it. Be sure to consider all the advantages and disadvantages before making a decision. Although CSS-in-JS may be what you need, there may be compromises you don’t want to accept.