五大CSS 样式继承

前端熊猫

已于 2024-12-17 16:43:38 修改

阅读量747

点赞数 11

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

于 2024-11-23 07:30:00 首次发布

本文链接：https://blog.csdn.net/m0_72030584/article/details/143936723

版权

Css3 专栏收录该内容

33 篇文章

订阅专栏

效果

一、使用公共样式类@extend继承

适用于小型项目，样式简单，共享样式局部复用时适用。

/* 公共样式 */
.stat-common {
  font-family: "Arial";
  font-weight: 400;
  color: #fff;
  text-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.stat {
  .stat-title {
    @extend .stat-common; /* 复用公共样式 */
    font-size: 25px;
  }

  .stat-description {
    @extend .stat-common; /* 复用公共样式 */
    font-size: 40px;
  }
}

二、使用父级继承

适用于当子元素都共享同样的公共样式，且都位于同一个父级容器内。

.stat {
  font-family: "Arial";
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 6px rgba(16, 173, 255, 0.91);

  .stat-title{
    font-size: 25px;
  }

  .stat-description{
    font-size: 40px;
  }
}

三、使用 CSS 变量

适用于公共样式需要在多个组件之间共享，甚至跨页面使用。

:root {
  --font-family: "Arial";
  --font-weight: 400;
  --text-color: #fff;
  --text-shadow: 0 0 6px rgba(16, 173, 255, 0.91);
}

.stat {
  font-family: var(--font-family);
  font-weight: var(--font-weight);
  color: var(--text-color);
  text-shadow: var(--text-shadow);

  .stat-title{
    font-size: 25px;
  }

  .stat-description{
    font-size: 40px;
  }
}

四、使用混合宏（Mixin，适用于 Sass/LESS）

适用于需要高度复用的样式，并且已经使用 Sass/LESS 等 CSS 预处理器。

@mixin stat-common {
  font-family: "Arial";
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 6px rgba(16, 173, 255, 0.91);
}

.stat {
  .stat-title{
    @include stat-common;
    font-size: 25px;
  }

  .stat-description {
    @include stat-common;
    font-size: 40px;
  }
}

五、使用 Utility 类（BEM 方法论扩展）

适用于公共样式需要在多个类之间自由组合和复用。

.u-stat-common {
  font-family: "Arial";
  font-weight: 400;
  color: #fff;
  text-shadow: 0 0 6px rgba(16, 173, 255, 0.91);
}

.stat-title{
  ime-mode: u-stat-common;
  font-size: 25px;
}

.stat-description{
  ime-mode: u-stat-common;
  font-size: 40px;
}

若不使用CSS Modules，可以直接使用组合类：

  <div class="stat">
    <div class="stat-title u-stat-common">标题</div>
    <div class="stat-description u-stat-common">描述</div>
  </div>

六、总结

方法	适用场景	优点	局限性
@extend	小型项目，样式简单，共享样式局部复用时适用	简洁，直接复用	样式耦合，可能导致选择器冗余
父级继承	简单需求，子元素同属一个父级，所有元素共享公共样式	简单直观	子元素必须在同一父级内，缺乏灵活性
CSS 变量	需要动态更新样式（如主题切换）或跨组件复用场景	动态可变，跨组件复用，支持主题切换	不支持旧版浏览器，复杂样式不易管理
混合宏 (Mixin)	参数化高复用，样式中有细微差异，或公共样式需要配置参数	灵活可控，支持参数	样式量多时会增加生成 CSS 的体积
Utility 类 (BEM 扩展)	组件高度模块化，样式需要跨组件复用	高度复用，与结构解耦	命名规则需要统一，语义化可能不足

追更：

:root 伪类

是一个 CSS 伪类，它匹配文档的根元素。在 HTML 文档中，根元素就是 <html>。
使用 :root 定义的 CSS 变量在整个文档中都是全局可用的。

:root {
  --el-color-primary: #fff;
  // css自定义属性，以 -- 开头，表示自定义属性
  /**
  --el-color-primary 被设置为 #fff（白色）
  --el-color-primary 的地方都会应用这个颜色值
  如果你在其他地方已经定义了 --el-color-primary，这里的定义会覆盖之前的值。
  */ 
}