08 - 「CSS原子化」的前因

不二如是

每种被广泛使用的技术都有自己的一套理念和哲学，它们是技术的“灵魂”。

从历史角度看 CSS，占据主流的是：

组件化思想。

在软件开发领域，组件化几乎是永恒的“基础哲学”。

因为在软件开发领域，组件化是提升开发效率、实现可维护性的基石。

因此，CSS 诞生以后，产生的各种以 CSS 为核心的 UI 层框架就把组件化当作重点。

基于这种思想，把各种常用的网页样式需求提炼和抽象出来，以为开发人员提供各种“开箱即用”的组件。

例如，假设页面上有一个“警告框”类，可以给它起一个名字，叫作 alert-box。

然后定义好它的 CSS 样式属性，假设是这样：

.alert-box{
    padding-top: .75rem;
    padding-bottom: .75rem;
    background-color: rgba(86,61,124,0.15);
    border: 1px solid rgba(86,61,124,0.2);
}

有了这个预先定义好的 CSS 类，以后在同一个项目中。

所有用到这个样式的地方都可以直接在某个 HTML 元素上使用这个 alert-box 组件，这确实是非常高效的做法。

更重要的是，使用了组件的方式后，对于大规模的项目，若需要多名开发人员来共同完成。

则他们可以使用同一套预先定义好的组件库，这样可以大大提高代码的一致性，对于后期的维护也会非常有帮助。

如果需要修改这个样式，只要修改一次，所有使用这个样式的页面就都会被修改。

如果不这样做，一个项目中的多名开发人员“各自为战”来修改一个相同的样式就会复杂得多。

事实上，早期的 Bootstrap 就预先定义好了大量的 CSS 类和复杂的组件。

用户只要按照约定编写 HTML 结构，并配合相应的 CSS 类。

就可以实现精致的、具有充足设计感的网页效果，这也给开发人员带来了极大的便利。

但是，随着时间的推移，人们逐渐发现，基于组件化 CSS 的设计哲学仅仅是“看起来很美好”。

在实际开发中，尤其是项目规模扩大之后，隐藏的种种问题就会逐渐暴露出来。

并且会给开发人员带来相当大的困扰，主要有以下几点：

• CSS 中所有的样式都是全局作用的，只能通过复杂的选择器实现作用范围内的具体化。这会导致容易发生重名或者不经意间错误地覆盖规则。
• 复杂的规则重叠、代码冗余和“膨胀”、难以消除无用代码。
• 在组件化开发中，需要大量的具有准确语义、易于理解和记忆的名称，这对于开发团队内部保证命名规则的一致性非常困难
  

这些问题使得对 CSS 代码的管理和维护变得非常困难，导致的结果是基于组件的 CSS 项目只在开始的时候降低了复杂度。

随着项目不断进展，组件化反而会提高项目开发的复杂度。

由此，近年在CSS工程领域，出现了一种新的 CSS 哲学——原子化。

游客，如果您要查看本帖隐藏内容请回复

这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅 ）

官方 Web 课程：

鱼C-小师妹

第一

歌者文明清理员

thanx