CSS重复代码优化：抽离公共通用类消除重复样式实现复用

优化思路 #

将两段代码中完全重复的样式属性统一抽离到公共基础类中，仅保留background-image以及原代码中存在的宽度差异属性在各自的子类，大幅降低代码冗余。

优化后代码 #

公共基础类（所有重复样式统一管理） #

.n-bullet-silhouette-base::before {
    background-repeat: no-repeat;
    display: inline-block;
    content: "";
    height: 4rem;
    /*float: left;*/
    margin-right: 10px;
    position: absolute;
    top: 0;
    left: -30px;
}

差异化子类（仅保留独有属性） #

.n-bullet-silhouette-1-004077::before {
    background-image: url("/wp-content/themes/nonverbis/assets/img/cliparts/woman-silhouette/004077/silhouette_1.svg");
    width: 4rem;
}

.n-bullet-silhouette-2-004077::before {
    background-image: url("/wp-content/themes/nonverbis/assets/img/cliparts/woman-silhouette/004077/silhouette_2.svg");
    max-width: 4rem;
    width: 100%;
}

使用方式 #

给对应DOM元素同时添加公共基础类 + 对应编号的差异化子类即可，示例：

<!-- 展示第一个剪影的元素 -->
<div class="n-bullet-silhouette-base n-bullet-silhouette-1-004077"></div>

<!-- 展示第二个剪影的元素 -->
<div class="n-bullet-silhouette-base n-bullet-silhouette-2-004077"></div>

额外优化建议 #

• 若原代码中两个类的宽度属性差异是笔误，可将统一的宽度配置放到公共基础类中，子类仅需要保留background-image一个属性即可，冗余度更低。
• 后续新增同样式的剪影效果时，仅需要新增对应子类、配置背景图即可，不需要重复编写公共样式。

内容的提问来源于stack exchange，提问作者Kifsif