CSS - Isolation

Naming Conventions

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

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:

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

CSS-in-JS

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:

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.

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

<script>
  const template = document.getElementById('my-template').content;
  const shadowRoot = document.createElement('div').attachShadow({ mode: 'open' });
  shadowRoot.appendChild(template.cloneNode(true));
</script>

3. 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.