将CSS层叠层整合到现有项目中

本文旨在分享将CSS层叠层整合到现有遗留代码库的完整、未经过滤的实践经验。实际上，这是关于重构现有CSS以使用层叠层而不会破坏任何功能的过程。

理解项目

在开始使用@layer之前，我们需要充分了解正在处理的内容。项目包含三个主要文件：index.html、index.css和index.js。

index.css文件超过450行代码，初步浏览就能发现一些明显问题：

相同选择器指向相同HTML元素的代码重复
大量使用#id选择器
#botLogo被定义了两次，相隔70多行
!important关键字在整个代码中随意使用

规划层结构

我决定将样式分为五个不同的层：

reset：浏览器默认重置，如box-sizing、边距和内边距
base：HTML元素的默认样式，包括默认排版和颜色
layout：控制元素位置的主要页面结构
components：可重用的UI片段，如按钮、卡片和菜单
utilities：单一辅助修饰符

整合层叠层

在文件顶部定义层顺序：

1

@layer reset, base, layout, components, utilities;

重置层

1
2
3
4
5
6
7


@layer reset {
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
}

基础层

1
2
3
4
5
6
7


@layer base {
  body {
    background-image: url("bg.svg");
    font-family: "Poppins", sans-serif;
    /* ... 其他样式 */
  }
}

将ID转换为类

我坚信尽可能使用类选择器而不是ID选择器。这通过保持默认低特异性来防止特异性战斗，使代码更易维护。

动画

我将动画隔离在它们自己的新第五层中，并更新了层顺序以包含它：

1

@layer reset, base, layout, components, utilities, animations;

媒体查询

媒体查询应该与它们影响的元素放在同一层中，因为：

保持响应式样式与其基本元素样式在一起
使覆盖可预测
与现代Web开发中常见的基于组件的架构很好地配合

实用工具层

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11


@layer utilities {
  .noselect {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -webkit-user-drag: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
}

挑战与收获

遇到的困难

开始位置难以确定：通过首先定义层并设置其优先级级别，我有了一个决定如何移动特定样式的框架
浏览器支持：层叠层在我写作时享有94%的支持覆盖率，但可能需要容纳不支持分层样式的传统浏览器
!important关键字：它们反转了整个分层优先级系统，需要平衡重构代码和修复现有代码

层叠层的好处

建立层无疑改善了代码。真正的胜利在于一组更可维护的样式。更容易找到你需要的东西，知道特定样式规则在做什么，以及在哪里插入新样式。

结论

重构CSS以使用层叠层绝对值得单独为了维护增强。“从头开始并在从零开始工作时定义层可能’更容易’，因为需要整理的继承开销和技术债务更少。但如果你必须从现有代码库开始，你可能需要先解开样式的复杂性，以确定你需要进行多少重构。”

CSS层叠层技术实战：重构遗留项目的样式架构

本文详细介绍了如何将CSS层叠层技术整合到现有项目中，通过实际案例展示如何重构遗留代码库的样式架构，解决样式冲突和特异性问题，提升代码可维护性。