08 - 「CSS原子化」的前因
本帖最后由 不二如是 于 2023-6-26 20:28 编辑每种被广泛使用的技术都有自己的一套理念和哲学，它们是技术的“灵魂”。
从历史角度看 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 哲学——原子化。
**** Hidden Message *****
这位鱼油，如果喜欢本帖子，请订阅>>> 专辑 <<<（不喜欢更要订阅{:10_278:} ）
官方 Web 课程：
https://www.bilibili.com/video/BV1QW411N762 第一 thanx
页:
[1]