css 样式隔离

最新推荐文章于 2024-02-19 18:41:48 发布

神奇大叔

最新推荐文章于 2024-02-19 18:41:48 发布

阅读量870

点赞数

分类专栏： css 文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/weixin_43294560/article/details/131599857

版权

css 专栏收录该内容

62 篇文章 2 订阅

订阅专栏

文章目录

BEM（Block Element Modifier）
CSS Modules
Shadow DOM
CSS-in-JS
Scoped CSS

BEM（Block Element Modifier）

Block：表示一个独立的、具有明确功能的实体。例如，.header 或 .nav。
Element：表示一个 Block 内的元素。它始终与其父 Block 相关联，并使用双下划线分隔。例如，.button__icon 或 .form__input
Modifier：表示 Block 或 Element 的状态、变体或特性。它使用双连字符分隔。例如，.button–primary 或 .form__input–invalid。

/* 基本 Block */
.button {
  background-color: #4CAF50;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
}

/* Element */
.button__icon {
  /* 添加 icon 的样式 */
}

/* Modifier */
.button--primary {
  background-color: #008CBA;
}

.button--danger {
  background-color: #f44336;
}

CSS Modules

每个组件都有独立的 CSS 文件，并在构建过程中为每个类生成唯一的哈希值，以确保样式隔离

// 通过 css-loader 转换 hash 类名
const path = require('path');
const { getLocalIdent } = require('./css-modules');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js',
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: [
          'style-loader',
          {
            loader: 'css-loader',
            options: {
              module: true,
              getLocalIdent: (loaderContext, localIdentName, localName, options) => {
                return getLocalIdent(loaderContext, localIdentName, localName, options);
              },
            },
          },
        ],
      },
    ],
  },
};

// 将类名转换成唯一 hash
const fs = require('fs');
const path = require('path');
const crypto = require('crypto');

function generateHashedClassName(filename, className) {
  const content = fs.readFileSync(filename, 'utf-8');
  const hash = crypto
    .createHash('md5')
    .update(content)
    .digest('base64')
    .substr(0, 5);
  
  return `${className}--${hash}`;
}

function getLocalIdent(loaderContext, localIdentName, localName, options) {
  const fileName = path.basename(loaderContext.resourcePath);
  return generateHashedClassName(loaderContext.resourcePath, localName);
}

module.exports = {
  getLocalIdent
};

Shadow DOM

使用 Shadow DOM 技术，组件的 CSS 样式会被限制在组件的局部范围内，从而实现样式隔离。

详情

CSS-in-JS

动态生成样式：在 CSS-in-JS 中，组件的样式可以通过 inline JavaScript 对象或模板字符串直接在组件中赋值。这意味着可以根据组件的属性和状态动态调整样式。
局部作用范围：由于 CSS-in-JS 将样式直接与特定组件关联，每个组件的样式都具有局部作用范围。通过局部变量和组件生命周期钩子，可以在组件卸载时自动取消应用其样式，避免影响其他组件的样式。
唯一的类名：当使用 CSS-in-JS 库（例如 styled-components）时，它们会在运行时为每个组件生成唯一的类名。这使得每个组件的样式完全分离，不会与其他组件发生命名冲突。
优化渲染：CSS-in-JS 库会在组件挂载时自动将样式插入到 DOM 中。这样可以确保只有必要的样式被渲染，以提高性能和避免渲染不必要的全局样式。

核心是将唯一样式和元素关联起来

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS-in-JS</title>
</head>
<body>
    <button id="myButton">Click me!</button>

    <script src="css-in-js.js"></script>
</body>
</html>

const myButton = document.getElementById('myButton');

// 生成唯一哈希值
function generateHash() {
  return Math.random().toString(36).substr(2, 5);
}

// 创建样式标签
function createStyleTag(css) {
  const style = document.createElement('style');
  style.type = 'text/css';
  style.appendChild(document.createTextNode(css));
  document.head.appendChild(style);
}

// 将样式与元素关联
function cssInJs(element, styles) {
  const hashedClassName = 'css_in_js_' + generateHash();
  element.classList.add(hashedClassName);

  const css = `
    .${hashedClassName} {
      background-color: lightblue;
      color: white;
      padding: 0.5rem 1rem;
      border: none;
      font-size: 1.2rem;
      cursor: pointer;
    }
  `;
  createStyleTag(css);
}

// 应用样式
cssInJs(myButton);

Scoped CSS

使用 Scoped CSS 技术来实现 CSS 隔离，每个组件的样式都会被包裹在一个特定的属性选择器中，避免样式冲突和影响。

const myButton = document.getElementById('myButton');
const styleElement = document.getElementById('css');

// 生成唯一哈希值
function generateHash() {
  return Math.random().toString(36).substr(2, 5);
}

// 添加唯一属性
function addScopedAttribute(element, attributeName) {
  element.setAttribute(attributeName, '');
}

// 创建 Scoped CSS 的样式
function createScopedCSS(attributeName, css) {
  // 将应用到组件的原始选择器类名替换成属性选择器
  // .myButton {...} 类样式将变为 .myButton[data-scoped-abcdef] {...}
  const scopedCSS = css.replace(/(\.\w+)/g, `$1[${attributeName}]`);
  styleElement.textContent += scopedCSS;
}

// 实现 Scoped CSS
function scopedCSS(element, styles) {
  const uniqueAttribute = `data-scoped-${generateHash()}`;
  // 将唯一属性设置到元素上，从而能通过属性选择器匹配
  addScopedAttribute(element, uniqueAttribute);
  createScopedCSS(uniqueAttribute, styles);
}

// 定义样式
const buttonStyles = `
  .myButton {
    background-color: lightblue;
    color: white;
    padding: 0.5rem 1rem;
    border: none;
    font-size: 1.2rem;
    cursor: pointer;
  }
`;

// 应用样式
scopedCSS(myButton, buttonStyles);