CSS - Isolation


CSS Isolation Techniques

Naming Conventions

Naming conventions help organize and structure CSS classes to avoid conflicts and improve code readability. Three popular naming conventions are:

Naming Convention Description
BEM (Block Element Modifier) Divides the user interface into independent blocks. Each block has a unique name, and its elements and modifiers are separated by double underscores (__) and double hyphens (--), respectively.
OOCSS (Object-Oriented CSS) Separates the structure and skin of components. It uses classes to define the appearance and behavior of elements, promoting code reuse and reducing repetitive styling.
SMACSS (Scalable and Modular Architecture for CSS) Organizes CSS into five categories: base, layout, module, state, and theme. This modular structure helps keep the CSS organized, maintainable, and scalable.

CSS Modules

CSS Modules allow you to write modular and reusable CSS code by automatically generating unique class names.

  1. What are CSS Modules? CSS Modules write local scoped CSS classes that are unique to a specific component. They solve the problem of global scope in CSS by generating unique class names scoped to the component.

  2. Benefits of using CSS Modules:

    • Avoids naming conflicts: CSS Modules generate unique class names, eliminating the risk of naming conflicts between components.
    • Improves code maintainability: CSS Modules make it easier to understand and maintain the styles associated with each component.
    • Encourages modular design: By scoping styles to specific components, CSS Modules promote a modular and reusable component-based architecture.
  3. To implement CSS Modules in a project, configure your build process to handle CSS Modules and import the styles into your components using a special syntax:

Example: Importing CSS Modules

import styles from './styles.module.css'


CSS-in-JS is an approach where CSS is written directly in JavaScript code, allowing for dynamic styling and better integration with component-based frameworks.

  1. Overview of CSS-in-JS libraries: CSS-in-JS libraries provide a way to write CSS styles using JavaScript syntax. They allow you to define styles as JavaScript objects or template literals and apply them to components.

  2. Advantages of using CSS-in-JS:

    • Dynamic styling: CSS-in-JS allows you to manipulate styles based on component props or state.
    • Scoped styles: Styles defined using CSS-in-JS are automatically scoped to the component, preventing global naming conflicts.
    • Improves performance: Some CSS-in-JS libraries optimize the rendering process by only applying the necessary styles to the DOM.
  3. Popular CSS-in-JS libraries include:

Example: styled-components and emotion

import styled from 'styled-components';
import { css } from '@emotion/react';

These libraries provide an intuitive way to define and apply styles to components using tagged template literals or JavaScript objects.

Shadow DOM

Shadow DOM is a web standard that allows you to create encapsulated DOM trees within a component, providing style and markup isolation.

  1. Introduction to Shadow DOM: Shadow DOM is a technique that enables the creation of a separate DOM tree within an element, known as a shadow tree. This shadow tree is isolated from the main document DOM, providing encapsulation for styles and markup.

  2. Encapsulating styles with Shadow DOM: By creating a shadow tree, you can define styles that are scoped only to the elements within that shadow tree. This prevents styles from leaking out and affecting other parts of the document.

Example: Creating a shadow tree

<template id="my-template">
    p {
      color: red;
  <p>Shadow DOM paragraph</p>

  const template = document.getElementById('my-template').content;
  const shadowRoot = document.createElement('div').attachShadow({ mode: 'open' });
  1. Creating web components with Shadow DOM: Shadow DOM is a key feature of web components, allowing you to create reusable and self-contained components. By encapsulating the component's styles and markup within a shadow tree, you can ensure that the component's styles do not interfere with other elements on the page.