ACSS의 CSS 아키텍처에 대한 심층 분석-프런트엔드 Q&A-php.cn

ACSS의 CSS 아키텍처에 대한 심층 분석

WBOY

풀어 주다： 2022-01-19 17:55:27

앞으로

2561명이 탐색했습니다.

이 기사는 CSS 아키텍처 ACSS에 대한 관련 지식을 제공하며 ACSS의 개념과 장점, ACSS 라이브러리 선택 방법을 자세히 소개합니다.

ACSS의 CSS 아키텍처에 대한 심층 분석

머리말

컴포넌트화가 현재 인기 있는 프런트 엔드 개발 모델이라는 것을 알고 있는데, 가장 인기 있는 CSS 개발 모델은 무엇입니까? 네, 오늘은 우리의 주인공 ACSS를 먼저 살펴보겠습니다. 주요 웹사이트의 응용 프로그램:

Twitter의 HTML은 다음과 같습니다.

ACSS의 CSS 아키텍처에 대한 심층 분석

Facebook HTML은 다음과 같습니다.

ACSS의 CSS 아키텍처에 대한 심층 분석

마지막으로 GitHub 홈페이지를 살펴보세요.

ACSS의 CSS 아키텍처에 대한 심층 분석

잠깐...

Twitter와 Facebook의 클래스 이름을 보면 깜짝 놀랄 수도 있지만, 둘 다 ACSS의 한 종류이기 때문에 상대적으로 보면 GitHub ACSS가 더 적합합니다. 그래서 많은 대기업들이 ACSS를 사용하고 있습니다. 정말 효과적이라는 것을 보여주므로 많은 프로젝트에서도 시도해 보아야 합니다.

다음으로 ACSS 연구에 들어갑니다.

ACSS의 개념

ACSS는 Thierry Koblenz가 2013년 10월 CSS 모범 사례에 도전하는 기사에서 만든 Atomic CSS의 약자입니다.

먼저 Atomic CSS에 대해 적절한 정의를 내리겠습니다.

John Polacek은 Let's Define Exactly What Atomic CSS is라는 글에서 다음과 같이 썼습니다.

Atomic CSS는 이름이 있는 소규모 단일 목적 클래스를 선호하는 CSS 아키텍처에 대한 접근 방식입니다.

번역: Atomized CSS는 작은 단일 목적 클래스를 선호하는 CSS 아키텍처 방법이며 시각 효과의 이름을 따서 명명됩니다.

ACSS라고 부르는 것 외에도 기능적 CSS 또는 CSS 유틸리티라고 부를 수도 있습니다.

CSS는 논리를 강조하지 않고 성능에 더 중점을 두는 WYSIWYG 언어입니다. 스타일을 너무 많이 작성하면 일반적으로 사용되는 스타일이 몇 개밖에 없고 순열을 조정하는 것에 지나지 않습니다. 그리고 조합. 이러한 반복적인 스타일 코드를 작성할 때마다 바퀴를 다시 발명하는 것처럼 느껴집니다. 당연히 약어가 필요하며 ACSS가 수행하는 작업 중 일부는 매우 일반적이며 이는 CSS 속성을 독립적인 클래스로 작성하는 것에 지나지 않습니다. 이름.

.m-0 {
  margin: 0;
}
.text-red {
  color: red;
}
/* ... */

로그인 후 복사

ACSS와 CSS-in-JS가 인기 있는 이유는 무엇인가요?

앞서 ACSS의 개념을 이해했으니 다음에는 CSS-in-JS의 개념에 대해 이야기한 다음 설명하겠습니다. 왜 그렇게 인기가 있는지.

CSS-in-JS는 매우 중요한 개념입니다. 원래 제목은 "CSS-in-JS for CSS Architecture"였습니다. 작성했으므로 Ruan Yifeng - JS의 CSS 소개를 가져오겠습니다. 하지만 Ruan 선생님은 인기 있는 CSS에 대한 솔루션을 제공하지 않았습니다. 현재 21년이 지났지만 현재 인기 있는 솔루션이 여러 개 있습니다. 각각은 장점과 단점이 있습니다. 이를 완전히 이해하려면 기사가 필요하므로 @FateRiddle의 동급생의 React 발췌문: 현재 인기 있는 10가지 CSS 솔루션 중 내가 가장 좋아하는 것에 대해 이야기하기(1부)가 등장했습니다.

위의 기사 링크를 무시해도 됩니다. 제가 정리하겠습니다.

오래 전에는 프런트 엔드 프로젝트가 상대적으로 작았으며 나중에 HTML, CSS 및 JS가 모두 결합되었습니다. 프로젝트 규모가 점점 커지면서 유지 관리를 용이하게 하기 위해 코드를 결합할 수 없으며 각 기술은 해당 분야에만 책임을 져야 합니다.

나중에 React가 등장하면서 프런트엔드의 코드 구성 방식이 바뀌었습니다. 컴포넌트가 코드를 구성하는 주류 방법이 되었고, 컴포넌트의 핵심 원리는 코드가 외부에 전혀 의존하지 않는다는 것입니다. React에서 HTML, CSS 및 JS의 강력한 결합에 반영되어 다른 구성 요소에 영향을 미치지 않습니다. 실제로 인라인 스타일을 작성하는 JS의 CSS가 필요합니다.

그러나 인라인 스타일은 의사 클래스와 미디어 쿼리를 지원하지 않으므로 React-JSS와 같은 라이브러리는 인라인 스타일을 확장하는 것으로 나타났습니다. 어떤 사람들은 A에 이어 등장한 React-JSS의 카멜 케이스 작성 방법을 견딜 수 없습니다. 표준화된 CSS 작성 방법을 갖춘 라이브러리; 어떤 사람들은 결합되지 않은 작성 방법을 선호하므로 다른 사람들은 Vue의 솔루션이 더 우아하다고 생각하고 styled-jsx가 나타났습니다.

요약하자면:

CSS-in-JS는 본질적으로 인라인 스타일이며, 컴포넌트화 시대의 도래로 인기를 얻었습니다.

JS에서 CSS가 인기를 끄는 이유를 이해한다면 ACSS가 인기를 얻게 될 이유도 분명 짐작할 수 있을 것입니다. 즉, 컴포넌트화 시대의 도래입니다. ACSS가 CSS의 컴포넌트화라는 것도 이해할 수 있습니다. CSS 아키텍처.

컴포넌트가 없는 전통적인 웹 개발 시대에 ACSS를 사용하여 다음 코드와 같은 스타일을 결정한다면 협력 파트너는 확실히 당신이 미쳤다고 생각할 것입니다.

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">按钮</button>

로그인 후 복사

因为 button 的复用率很高，你项目到处充斥着这种 button，一旦 button 要修改某些样式，你可去哭娘去吧，这哪有直接给个 .btn 类名方便，要修改直接改类名就行了，例如下面：

<button class="btn">按钮</button>

로그인 후 복사

但是在组件化时代就不一样了，例如使用 React 封装一个 Button：

const Button = ({ children, color }) => (
    <button class=`bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded ${color}`>{children}</button>
)

로그인 후 복사

使用如下：

<Button color="pink"> 注册 </Button>

로그인 후 복사

如果样式有修改，我只要插拔 ACSS 就行了，而且对比使用 .btn 实现，样式的重用性会极大提高，理解也很容易。

ACSS 优劣

使用 ACSS 的好处：

你的 CSS 停止增长。使用传统方法，每次添加新功能时，您的 CSS 文件都会变大。使用实用程序，一切都是可重用的，因此您很少需要编写新的 CSS，一套样式全局通用。
你不是在浪费精力发明类名。不再添加愚蠢的类名，例如 sidebar-inner-wrapper 只是为了能够设置样式，也不再为真正只是一个 flex 容器的东西的完美抽象名称而苦恼。
灵活，易读。CSS 是全球性的，当你做出改变时，你永远不知道你破坏了什么。HTML 中的类是本地的，因此您可以插拔式改变样式而不必担心其他问题，CSS 样式很多缩写更加符合大脑的记忆。
永远不用担心命名冲突，永远不用担心样式覆盖。

使用 ACSS 劣处：

毫无疑问，ACSS 会增加HTML 的体积，但是借助 Gzip 这个就不是大问题。
熟悉命名 ACSS 命名会有一定成本。

ACSS 劣处是非常小的，而好处有非常大，没有理由在项目中不适用，强烈建议你每个前端项目都是用 ACSS。

如何选择 ACSS 库

市面上有不少成熟的 CSS 框架，如 Tailwind CSS，Windi CSS 以及 Tachyons 等。

同时有些 UI 库也会附带一些 CSS 工具类作为框架的补充，如 Bootstrap 和 Chakra UI。

甚至还有一些人根据项目总结出来自己的 ACSS，例如 atom.css、SACSS: Static Atomic CSS 等。

ACSS 库大致就分为这三类了。

把它们整合到我们的项目，那我们选择的标准是什么呢？

按需生成，比如我们使用 class="m-1" 来设置 margin，那么 m-x，x 到底是多大呢，x 但不管 x 是多大，当增加 x 的时候，margin 不同方向，比如 mt 代表 margin-top，mb 代表 margin-bottom 等，也得增加，如果加上 :hover 和 :focus 这样的伪类时，体积还会得更变大，原子类太多了，应该提供按需生成只加载我们用过的。

动态化，原子类不应该是完全静态化的，比如我要使用 class="m-100" ，我应该可以是直接使用，而不是设置完之后，发现样式没生效，然后通过框架的配置文件，去增加对 m-100 的支持，原子类要把可插拔做到极致。

除了上面两个是非常重要的标准，我认为自动值推导和属性化模式也是提升了开发体验要考虑的部分。

我们来看看我们最终会选择哪个 ACSS 库，首先原子 CSS 一定要纯净，所以 UI 框架附带的 ACSS 就不能采用了，根据项目总结的 ACSS，它的原子 CSS 太过静态，不能随想随用，不符合原子类不应该是完全静态化的标准，Tailwind CSS 本来是没有按需生成的，后来增加了，但是 Windi CSS 速度更快还兼容 Tailwind CSS，所以我们很自然就必须必的选择了 Windi CSS 。

总结

我们先通过举例子，了解了 ACSS 的使用，然后介绍了 ACSS 的概念，通过对比 CSS-in-JS 来剖析 ACSS 借助前端组件化浪潮开始起飞的过程，最后如何在项目中选择自己的 ACSS 库，我们通过一些硬性标准，分析了三类 ACSS 库，帮你选择了 Windi CSS

（学习视频分享：css视频教程）

위 내용은 ACSS의 CSS 아키텍처에 대한 심층 분석의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!