要实现css样式隔离，你会怎么做？

前端布道人

已于 2023-03-09 00:15:50 修改

阅读量680

点赞数

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

于 2023-03-08 21:32:44 首次发布

本文链接：https://blog.csdn.net/BradenHan/article/details/129411887

版权

前端杂货铺专栏收录该内容

287 篇文章 1 订阅

订阅专栏

文章探讨了CSS全局作用域在React应用中导致的样式冲突和冗余代码问题，提到了命名规范如BEM和CSS解决方案，包括css-in-js、CSSModules以及使用SCSS的嵌套和属性选择器来实现更隔离的样式定义。

摘要由CSDN通过智能技术生成

背景

css 没有作用域的概念，这就导致 css 在书写的时候都是全局作用域。产生的影响如下：

开发者在书写过程中会造成因 classname 相同，产生样式污染、css规则层叠（）。
因某一个元素具有不同的状态增加众多的冗余css代码。

随着 SPA 应用的兴起，全部的 css 会在同一个环境中同时进行加载，相互影响的问题更加严峻。

React中现状

React官方没有规定在React应用里应该如何写css，

虽然官方教程里多数是写的inline-css，

但是官方并不推荐这样做，

其中一个原因是性能没有单独写成class的好。

如果解决样式覆盖的问题呢？

使用 命名规范（ BEM 、OOCSS、SMACSS等） 来解决命名冲突，人为手动为每个 class 属性起一个唯一的名字(很繁琐)
css-in-js的方案（增加了概念），
css-modules方案，但是每个className都需要写一个styles.实在是浪费键盘。

可以参考下面文章：

react基础入门到项目实战学习笔记 21 - react css module

其实我们也可以使用scss的嵌套语法和CSS 属性选择器来简单实现隔离。

比如js文件里这样写：

function App() {
  return (
    <div className="app" data-component="app">
      <div className="content">
        <p className="title">标题</p>
        <p className="text">隔离css</p>
      </div>
    </div>
  );
}

scss文件里这样写

[data-component=app] {
  .content {
    padding: 20px;
    .title {
      font-size: 18px;
      font-weight: bold;
      color: #333333;
    }
    .text {
      font-size: 16px;
      color: #333333;
    }
  }
}

扫描二维码，查看更加详细内容
在这里插入图片描述