Today we will see about CSS-in-JavaScript. CSS is awesome and easy to get started with, but front-end applications have been scaling at a massive and complex rate that doesn’t make the current CSS designed for the job. CSS-in-JS is a real deal and in many ways, is very much the best nowadays when it comes to building and styling applications on the web.
What is CSS-in-JS: Just as the name implies, CSS-in-Javascript. It is still CSS but it leverages JavaScript capabilities. It uses JavaScript as a language to describe styles in a declarative and maintainable way.
Benefits of CSS-in-JS:
- It throws errors to help you avoid mistakes, including syntax, type, and undefined errors.
- It makes dead code easier to manage.
- It helps you take advantage of anything from the JavaScript ecosystem.
- You don’t have to maintain multiple CSS files.
- Many CSS-in-JS libraries offer performance improvement like critical CSS with no additional setup needed.
When to use CSS-in-JS: A beginner who just wants to create websites without a dynamic front-end might find the standard CSS the best option for styling. But for developers who are working on a component-heavy javascript project, CSS-in-JS is the best option for you.
To implement CSS in JS: We cannot use CSS-in-JS without CSS-in-JS libraries. There are a lot of CSS-in-JS libraries Let’s see how to use CSS in JS with the help of these libraries with examples.
Creating React Application:
Step 1: Create a React application using the following command:
npx create-react-app
Step 2: Now, navigate to the ‘form’ folder by writing the below commands in the command prompt terminal.
cd foldername
Project Structure: It will look like the following.
Step 3: Type the below command to run your project on the browser localhost: 3000
npm start
1. Styled Components: It is one of the most popular CSS-in-JS libraries presented on Github. It has 23K+ stars on GitHub. With styled-components, you create a normal React component with your styles attached to it. Styled-component has awesome features like no class name bugs, painless maintenance. The steps on how to work with styled-components is sown below:
Step 1: Install the required library using the following command in your terminal:
// with npm npm install styled-components or // with yarn yarn add styled-components
Step 2: Now the installation is done. Write down the following code in the App.js file. Here is an example of how to style with a CSS-in JS library styled-component. In this file, we will quickly style our javascript by using styled component firstly by importing it and then you start styling it.
App.js
import React from 'react'; import styled from 'styled-components; const Title = styled.h1` font-size: 1.5em; text-align: center; color: hotpink; `; // The Title component will render // an <h1> tag with some styles const Wrapper = styled.div` padding: 4em; background: rebeccapurple; `; // The Wrapper component will render // a <div> tag with some styles const Paragraph =styled.p` color: white; // When styling classes you simply use // an ampersand and you style your class // just like you did with traditional CSS & .text{ text-align: left; } &:hover{ color:pink; }` // The paragraph component will render a // <p> tag with some styles const App = () =>{ return( <Wrapper> <Title> Styled Components </Title> <Paragraph className='text'> This is paragraph </Paragraph> </Wrapper> ); } // Use Title and Wrapper like any other // React component – except they're styled! |
Step 3: Run the code below in the terminal
npm start or yarn start
Output:
2. JSS: It is one more library with more than 6k stars on GitHub. JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free, and reusable way. It consists of multiple packages: the core, plugins, framework integrations, and others. The steps on how to work with JSS is down below:
Step 1: Install the required library using the following command in your terminal:
// with npm npm install --save react-jss or // with yarn yarn add react-jss
Step 2: Now the installation is done write down the following code in the App.js file. Here is an example of how to style with CSS-in JS library JSS. In this file, we will quickly style our javascript by using JSS firstly by importing it and then you start styling.
App.js
import React from 'react'; import {createUseStyles} from 'react-jss' const useStyles = createUseStyles({ wrapper: { textAlign: 'center', width: '100%', padding: '50px', color: '#444', }, title: { color: '#fd1a26', fontWeight: 400, }, }); const App = () => { const classes = useStyles() return( <div className={classes.wrapper}> <h1 className={classes.title}>Hello World</h1> <p className={classes.p}>This is a paragraph</p> </div> ) } export default App; |
Note: In JSS when styling you use commas to separate styles and styling of different elements.
Step 3: Run the code below in the terminal
npm start or yarn start
Output:
3. Emotion: It is a CSS-in-JS library that is focused on application performance. It has more than 7.7K stars on GitHub. It provides powerful and predictable style composition in addition to a great developer experience with features such as source maps, labels, and testing utilities. The steps on how to work with emotion are down below:
Step 1: Install the required library using the following command in your terminal:
// with npm npm install @emotion/styled @emotion/react or // with yarn yarn add @emotion/styled @emotion/react
Step 2: Now the installation is done write down the following code in the App.js file. Here is an example of how to style with the CSS-in-JS library emotion. In this file, we will quickly style our javascript by using emotion firstly by importing it and then you start styling.
App.js
/** @jsx jsx */import React from 'react'; import { jsx, css } from '@emotion/react'; import styled from '@emotion/styled'; const Wrapper = css` display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; padding: 40px; color: #444; border: 1px solid #4800f4; `; const Title = styled.h1` color: #0d1a26; font-weight: 400; `; const Button = styled('button')` padding: 8px 15px; border: none; border-radius: 5px; background-color: #4800f4; color: #fff; font-size: 14px; cursor: pointer; &:hover { transition: .5s; padding: 10px 20px; } `; const App = () => { return( <div css={Wrapper}> <Title>Hello world!</Title> <Button>This is a button</Button> </div> ) }; |
Step 3: Run the code below in the terminal
npm start or yarn start
Emotion has a similar syntax to styled-components.
Note: Emotion will not run if you don’t include this comment on the top of the file line:
/** @jsx jsx */
Output:
4. Aphrodite: It is another CSS-in-JS that has over 5.2k stars on Github. Aphrodite is a framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. This library great works with or without react. The steps on how to work with aphrodite are down below
Step 1: Install the required library using the following command in your terminal:
// with npm npm install aphrodite
Step 2: Now the installation is done write down the following code in the App.js file. Here is an example of how to style with CSS-in-Js library aphrodite. In this file, we will quickly style our javascript by using aphrodite firstly by importing it and then you start styling.
App.js
import React, { Component } from 'react'; import { StyleSheet, css } from 'aphrodite'; const styles = StyleSheet.create({ container: { width: '70%', padding: '20px', border: '1px solid #000', }, red: { backgroundColor: 'red'}, blue: { backgroundColor: 'yellow'}, hover: { background:'rebeccapurple', ':hover': { backgroundColor: 'hotpink' } }, small: { ':hover': { backgroundColor: 'royalBlue', }, } }); class App extends Component { render() { return ( <div> <p className={css(styles.red)}> This paragraph is purple. </p> <p className={css(styles.hover)}> This paragraph is indigo and turns purple on hover. </p> <p className={css(styles.small)}> This turns blue when the browser is less than 600px width. </p> <p className={css(styles.red, styles.blue)}> This is yellow. </p> <p className={css(styles.blue, styles.small)}> This paragraph is white, turns blue when the browser is less than 600px width. </p> </div> } } } |
Step 3: Run the code below in the terminal
npm start or yarn start
Output:
