How does CSS-in-JS work?
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,
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.
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 => ( )
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-
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.
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.
Stay Connected With Us On Social Media Platforms For Instant Updates, Click Here To Join Us Facebook