Atomic CSS是CSS架构的一种方法, 它的好处是写出基于视觉功能的小的, 单用途CSS类. 使用Atomic CSS, 为每个可重用的属性创建单独的CSS类. 例如, margin-top: 1px; 就可以创建一个类似于mt-1的CSS类, 或者width: 200px; 对应的CSS类为w-200. 这种样式允许您通过重用声明来最大程度地减少您的CSS代码数量, 并且也能很轻松的更改模块, 例如, 更改以技术任务时. 然而, 这种方法有很大的缺点: * CSS类名是属性名称的描述, 而不是元素的自然语义. 这种想象很容易使人在开发过程中变得迷茫. 开发本身也十分容易复杂化. * 直接在HTML中进行显示设置. 由于这些短板的存在, 这种做法遭到了大量的批评. 然而, 这种做法对于大型项目来说是有一定效果的. 此外, Atomic CSS在各种框架中被用于校正元素样式以及某些层(layers)的其他方法. > [**Atomic CSS**](https://acss.io/) > [Let’s Define Exactly What Atomic CSS is](https://css-tricks.com/lets-define-exactly-atomic-css/)