本文小编为大家详细介绍“CSS的ACSS架构怎么用”，内容详细，步骤清晰，细节处理妥当，希望这篇“CSS的ACSS架构怎么用”文章能帮助大家解决疑惑，下面跟着小编的思路慢慢深入，一起来学习新知识吧。
创新互联公司是一家专注于网站制作、成都做网站与策划设计,海伦网站建设哪家好?创新互联公司做网站,专注于网站建设十多年,网设计领域的专业建站公司;建站业务涵盖:海伦等地区。海伦做网站价格咨询:13518219792
前言
我们知道现在前端开发模式，组件化是比较火的，那么 CSS 开发模式比较火的是什么呢，没错就是我们今天的主角 ACSS，我们先观察下各大型网站的应用：
Twitter 上的 HTML 是这样的：
Facebook HTML 是这样的：：
最后看看 GitHub 的首页：
等等……
看到 Twitter、Facebook 的类名你可能会吓一跳，但是那也是 ACSS 的一种，相对来讲 GitHub ACSS 更加符合你的直观，无论如何，这么多大公司都用到了 ACSS，说明它确实有效，你应该也要在项目多多尝试尝试。
接下来我们进入 ACSS 的学习。
ACSS 的概念
ACSS 是 Atomic CSS 的简写，它是 Thierry Koblenz 在 2013 年 10 月的文章 Challenging CSS Best Practices 中创造的。
首先，让我们为 原子化 CSS (Atomic CSS) 给出适当的定义：
John Polacek 在文章 Let’s Define Exactly What Atomic CSS is 中写道：
Atomic CSS is the approach to CSS architecture that favors small, single-purpose classes with names based on visual function.
译文：原子化 CSS 是一种 CSS 的架构方式，它倾向于小巧且用途单一的 class，并且会以视觉效果进行命名。
除了叫 ACSS，你还可以称它为函数式 CSS，或者 CSS 实用工具。
CSS 是一个不强调逻辑，而更侧重表现的一门所见即所得的语言，当样式写多了，你就会发现常用样式的来来去去也就那几个，无非就是调整一下他们的排列组合。每次写这些重复的样式代码我就感觉自己是在重复造轮子，自然而然就产生了想要缩写的需求，而 ACSS 做的一些事情很平常，无非就是把 CSS 属性写成一个独立的类名。
.m-0 {
margin: 0;
}
.text-red {
color: red;
}
/* ... */ACSS 和 CSS-in-JS 为什么会火
前面我们明白了 ACSS 的概念，所以接下来我要讲下 CSS-in-JS 的概念，然后才好解释为什么它们会火。
CSS-in-JS 是很重要的概念，本来打算写篇文章介绍的，题目都取好了 「CSS 架构之 CSS-in-JS」，整理资料发现阮一峰老师写过了，那我就直接拿过来吧 阮一峰——CSS in JS 简介，但是阮老师并没有给出流行 CSS 的解决方案，现在都 21 年了，我们知道目前流行着好几种解决方案，方案各有利弊，我们需要一篇文章来通透的理解它们，于是 @FateRiddle 同学的 React拾遗：从10种现在流行的 CSS 解决方案谈谈我的最爱 （上） 这篇文章出现了。
你可以先不看上面的文章链接，我来给你梳理下：
很久以前，前端项目比较小，HTML、CSS、JS 都耦合在一起，后来随着项目越来越大，为了便于维护，代码不允许在耦合，要求各个技术只负责自己的领域。
在后来，伴随着 React 出现，前端组织代码的方式变了，组件成为组织代码主流方法，而组件的核心原则就是代码完全不依赖外部，表现在 React 中就是 HTML、CSS、JS 强强耦合，这样就避免了影响其他组件，对于 CSS 我们也写在了 JS 中，这就要 CSS in JS，其实就是写行内样式。
但行内样式不支持伪类、媒体查询，于是出现了 React-JSS 这种库，对行内样式进行扩展；有人又不能忍受 React-JSS 这种样式驼峰的写法；出现了 styled-components，遵循 CSS 写法规范的库；有人比较喜欢不耦合的写法，于是 Css Module 出现了；还有人觉得 Vue 的解决办法比较优雅，然后就出现了 styled-jsx。
我来总结下：
CSS-in-JS 本质就是行内样式，之所以会火就是因为组件化时代的到来。
看明白 CSS in JS 火的原理，你肯定猜到 ACSS 会火的原因——那就是组件化时代的到来，你甚至可以理解为 ACSS 就是 CSS 架构下得 CSS 组件化。
在没有组件化的传统网页开发时代，如果你通过 ACSS 来确定样式，例如下面代码的形式，合作的小伙伴肯定以为你疯了：
