和样式污染说不

全局样式污染

全局样式污染(Cascading Style Sheets Contamination)通常指的是一个CSS文件或样式规则意外地影响了其他组件或页面的样式。

可能是由以下原因造成:

  1. 选择器优先级不足,导致规则被其他更具体或更靠后的样式覆盖
  2. 使用了全局选择器*,使得所有元素都受到影响
  3. 样式文件被错误地引入到了多个页面或组件中,导致重复应用
  4. 样式文件中的规则被意外复制或合并到其他文件中

可行的解决方法:

  1. 检查并提高样式规则的特异性,使用更具体的选择器,如类选择器或ID选择器
  2. 避免使用全局选择器*,除非绝对必要
  3. 确保样式文件只被引入到需要它的组件或页面中,避免全局污染
  4. 对样式文件进行组织和管理,避免不必要的复制或合并

在实际操作中,可以使用以下方法来减少或避免全局样式污染:

  • 使用CSS模块化,每个模块或组件拥有自己的样式文件,并通过特定的类名或ID将样式局部作用于元素上
  • 使用CSS-in-JS库(如styled-components),它们允许你用JavaScript编写样式,从而避免全局样式污染
  • 使用CSS预处理器(如Sass、Less)的嵌套规则,减少不必要的全局选择器
  • 使用CSS框架时,遵循其命名空间和作用域的最佳实践,避免全局样式污染
  • 进行代码审查,确保没有重复的样式文件被引入到不同的页面或组件中

CSS模块化

CSS模块化是一种组织和管理CSS代码的方法,可以减少样式冲突,提高代码复用性,并增加样式的可维护性。

  1. BEM (Block Element Modifier) 命名规范

BEM是块、元素、修饰符(Block, Element, Modifier)的缩写。它是一种命名约定,有助于开发人员编写可重复使用、易于维护和扩展的CSS代码。

css 复制代码
.button {
  display: inline-block;
  padding: 10px 20px;
  border: 1px solid #000;
  text-align: center;
}
.button__text {
  font-size: 16px;
}
.button--large {
  padding: 15px 30px;
}
  1. Atomic CSS模块化

将每个样式都视为原子,尽量避免组合样式。

css 复制代码
.mr10 {
  margin-right: 10px;
}
.p20 {
  padding: 20px;
}
.bg-blue {
  background-color: blue;
}
.container {
  @extend .mr10;
  @extend .p20;
  @extend .bg-blue;
}

CSS-in-JS

将CSS和JavaScript混合在一起的方法,它允许你以JavaScript的方式编写样式。

下载安装插件npm install styled-components

css 复制代码
import styled from "styled-components";

const StyledButton = styled.a`
  padding: 20px 40px;
  background-color: ${ ({ primary }) => ( primary ? "#07c" : "#333" ) };
  color: white;

  &:hover {
    background-color: #111;
  }
`;

export default StyledButton;

创建的标签样式可以在任何组件中使用

javascript 复制代码
import StyledButton from './components/styles/Button.styled';

function App() {
  return (
    <div className="App">
      <StyledButton href="...">Default Button</StyledButton>
      <StyledButton primary href="...">Primary Button</StyledButton>
    </div>
  );
}

export default App;

CSS预处理

像Sass/LESS这样的第三方插件,都提供了变量、混合(mixins)、嵌套规则等高级功能,可以帮助写出更模块化的CSS代码。

css 复制代码
$base-font-size: 16px;
// Mixin
@mixin center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
// Usage
.button {
  font-size: $base-font-size;
  @include center-block;
}

CSS @layer

项目开发中,经常出现第三方库代码和本地代码冲突,最常用的解决办法是增加本地代码的权重,如下所示:

sql 复制代码
.container .some-button {} 改为 body .container .some-button {}

这样的代码虽然可以解决问题,但是又长又臭,而CSS @layer的出现就是为了解决这个问题。

使用@layer将样式优先级降低

xml 复制代码
<style>
  @layer {
    #app .item {
      color: black;
      width: 100px;
      padding: 1em;
    }
  }
  .item {
    color: red;
  }
</style>
<div id="app">
  <div class="item">测试文案</div>
</div>

@import中使用

less 复制代码
@import './zxx.lib.css' layer(lib);

zxx.lib.css 里面所有 CSS 声明的优先级都会低于常规设置的 CSS 声明。

元素引用(*)

xml 复制代码
<!-- zxx-lib.css的样式属于名为 lib 的级联层 -->
<link rel="stylesheet" href="zxx-lib.css" layer="lib">

<!-- 样式引入到一个匿名级联层中 -->
<link rel="stylesheet" href="zxx-lib.css" layer>

CSS作用域划分(兼容性差)

CSS处理库提供的:global:local分别表示全局作用域和局部作用域,

  • :global:选择器用于指定某个样式规则应用于全局范围内的元素,而不受当前样式封装作用域的影响
  • :local:标记本地作用域内的样式
css 复制代码
:global(.map){ 
  color:#333; 
} 
.map{ 
  padding-top: 45px; 
  height: 100%; 
} 

:local(.map) { 
  color: red; 
}

Vue框架避免样式污染

  1. scoped

作用:当前样式只作用于当前组件,不会造成全局样式污染

xml 复制代码
<style lang="scss" scoped>
  .key {
    width: 250px;
    height: 30px;
  }
</style>
  1. ::v-deep

作用:修改第三方库样式,实现样式穿透

css 复制代码
::v-deep .confirm .el-button {
  width: 50px;
  height: 30px;
  padding: 2px 2px 2px 2px;
  border-radius: 3px;
}

React框架避免样式污染

  1. css modules
  2. styled-components
  3. CSS预处理器
相关推荐
bysking33 分钟前
【前端-组件】定义行分组的表格表单实现-bysking
前端·react.js
王哲晓1 小时前
第三十章 章节练习商品列表组件封装
前端·javascript·vue.js
fg_4111 小时前
无网络安装ionic和运行
前端·npm
理想不理想v1 小时前
‌Vue 3相比Vue 2的主要改进‌?
前端·javascript·vue.js·面试
酷酷的阿云1 小时前
不用ECharts!从0到1徒手撸一个Vue3柱状图
前端·javascript·vue.js
微信:137971205871 小时前
web端手机录音
前端
齐 飞1 小时前
MongoDB笔记01-概念与安装
前端·数据库·笔记·后端·mongodb
神仙别闹1 小时前
基于tensorflow和flask的本地图片库web图片搜索引擎
前端·flask·tensorflow
GIS程序媛—椰子2 小时前
【Vue 全家桶】7、Vue UI组件库(更新中)
前端·vue.js
DogEgg_0012 小时前
前端八股文(一)HTML 持续更新中。。。
前端·html