Styling React Components: CSS vs CSS-in-JS

When it comes to styling React components, developers often face the dilemma of choosing between traditional CSS and CSS-in-JS solutions. Both approaches offer unique advantages and drawbacks, influencing how developers design and maintain their application's user interface.

In this article, we delve into the differences between CSS and CSS-in-JS, exploring their syntax, dynamic styling capabilities, and integration with React. By understanding the variation of each approach, developers can make informed decisions on how to best style their React components for optimal performance, maintainability, and scalability.

CSS:

CSS stands for Cascading Style Sheets. It's a style sheet language used for making stylish and attractive a document written in a markup language like HTML. CSS describes how elements should be rendered on screen. It allows web developers to control the layout, colors, fonts, and other visual aspects of a web page. CSS operates by selecting HTML elements and then applying properties to them.

Syntax :

The general syntax of CSS (Cascading Style Sheets) consists of selectors and declaration blocks, properties, and values. Here's an overview:

• Selector: Used to select desired HTML elements.
• Declaration block: The entity that contains styling information (properties and values) applied on selected HTML.
• Property : It is an attribute of an HTML element that you want to style. It represents a specific aspect of the element's appearance or behavior. For eg. color, font-family etc.
• Value : A value is assigned to a property to define type & intensity of its appearance or behavior. Values can be keywords, numerical values, or other CSS units. For eg. blue, none, 100px etc.

selector {
  property1: value1;
  property2: value2;
}

Features:

• Separation of Concerns: In this approach, styles are typically defined in separate CSS files, keeping the structure of HTML (JSX in the case of React) and the styling separate.
• Global Scope: CSS styles can potentially affect other components if not scoped properly, leading to style conflicts and unintended consequences.
• Selector Specificity: CSS relies on selectors to apply styles, which can sometimes lead to specificity issues, making it challenging to predict which styles will be applied.
• Familiarity: Many developers are already familiar with CSS, making it an accessible choice for styling React components.

Example: Below is an example of styling components in CSS.

/* style.css */
#card {
    width: 300px;
    padding: 20px;
    border-radius: 10px;
    border: 1px solid green;
}

#btn {
    padding: 10px;
    border-radius: 5px;
    border: 1px solid green;
}

import React from 'react';
import './style.css';

function Card() {
    return (
        <div id='card'>
            <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                alt="gfg-logo" />
            <p>GeeksforGeeks Interactive Live and
                Self-Paced Courses to help you
                enhance your programming.
            </p>
            <button id='btn'>Explore Now</button>
        </div>
    );
}

export default Card;

CSS-in-JS:

CSS-in-JS is an approach to styling web applications dynamically. Here CSS styles are composed using JavaScript instead of traditional CSS files. This approach gained popularity within the React community and has since been adopted by other frontend frameworks and libraries

Features:

• Scoped Styles: With CSS-in-JS libraries like Styled Components or Emotion, styles are scoped to the component level by default, reducing the chance of style conflicts.
• Dynamic Styling: CSS-in-JS allows for dynamic styling based on props or state, enabling more flexibility and reusability in component design.
• Enhanced Readability: Styles are often co-located with the component code, which can improve readability and maintainability, especially for smaller components.
• Performance: CSS-in-JS libraries often generate styles dynamically, which can impact initial loading times compared to precompiled CSS. However, this overhead is usually negligible in most applications.
• Tooling Integration: CSS-in-JS libraries often offer tooling integration for features like theming, server-side rendering, and code splitting, which can streamline the development process.

Example: Below is an example of styling React Components in CSS-in-JS.

import React from 'react';

function Card() {
    const cardStyle = {
        width: '300px',
        padding: '20px', borderRadius: '10px',
        border: '1px solid green'
    };
    const btnStyle = {
        padding: '10px',
        borderRadius: '5px',
        border: '1px solid green'
    };

    return (
        <div style={cardStyle}>
            <img src="https://media.geeksforgeeks.org/gfg-gg-logo.svg"
                alt="gfg-logo" />
            <p>GeeksforGeeks Interactive Live and Self-Paced
                Courses to help you enhance your programming.
            </p>
            <button style={btnStyle}>
                Explore Now
            </button>
        </div>
    );
}

export default Card;

Output:

Difference between styling React Components using CSS & CSS-in-JS:

Conclusion:

Choosing between CSS (separate style sheets) and CSS-in-JS (styles within components) is like choosing furniture arrangements. CSS is familiar and easy to learn, good performance, but managing styles can get messy in large projects. CSS-in-JS keeps styles organized and avoids conflicts, but requires learning a new library and might impact loading times. The choice depends on project size, organization needs, and your comfort level with new tools.