ACSS の CSS アーキテクチャの詳細な分析-フロントエンドQ&A-php.cn

この記事では、CSS アーキテクチャ ACSS に関する関連知識を提供します。ACSS の概念と利点、ACSS ライブラリの選択方法について詳しく紹介します。皆様のお役に立てれば幸いです。

ACSS の CSS アーキテクチャの詳細な分析

まえがき

現在のフロントエンド開発モデルではコンポーネント化が比較的人気があることはわかっています。 CSS 最も人気のある開発モデルは何ですか? はい、今日の主役は ACSS です。まず主要な Web サイトのアプリケーションを観察してみましょう:

Twitter 上の HTML は次のようになります:

ACSS の CSS アーキテクチャの詳細な分析

#Facebook の HTML は次のとおりです::

ACSS の CSS アーキテクチャの詳細な分析

最後に GitHub ホームページをご覧ください:

ACSS の CSS アーキテクチャの詳細な分析

待って...

Twitter や Facebook のクラス名を見てびっくりするかもしれませんが、これらも ACSS の一種であり、比較的直感的には GitHub ACSS の方が合っています。いずれにせよ、大企業が ACSS を使用していることは、ACSS が実際に効果的であることを示しており、より多くのプロジェクトで ACSS を試してみるべきです。

次に、ACSS の検討に入ります。

ACSS の概念

ACSS は Atomic CSS の略語です。これは、Thierry Koblenz が 2013 年 10 月の記事「CSS Best への挑戦」で書いたことです。クリエイティブを実践します。

まず、アトミック CSS (アトミック CSS) を適切に定義しましょう:

John Polacek は、「アトミック CSS を正確に定義しましょう」という記事で次のように書いています:

アトミック 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 アーキテクチャのための CSS-in-JS」でした。情報を整理したところ、 Ruan Yifeng 先生がそれを書いたということです。それでは、Ruan Yifeng - JS での CSS 入門を引き継ぎますが、Ruan 先生は人気のある CSS に対する解決策を提供しませんでした。それは現在 21 年前です。私たちは、あることを知っています。現在人気のあるソリューションがいくつかあり、それぞれに独自のソリューションがあり、そのメリットとデメリットを徹底的に理解するには記事が必要なので、 @FateRiddle の React 抜粋: 現在人気の CSS ソリューション 10 個から私のお気に入りについて語る (パート 1) この記事が表示されました。

まず上記の記事リンクは無視していただいて大丈夫です。整理してみましょう:

昔、フロントエンドプロジェクトは比較的小規模で、HTML、CSS、JS はすべて結合されています. その後, プロジェクトはますます大きくなっています. メンテナンスを容易にするために、コードの結合は許可されておらず、各テクノロジはその分野のみを担当する必要があります。

その後、React の登場により、フロントエンドでのコードの編成方法が変わり、コンポーネントがコードを編成する主流の手法となり、コンポーネントの中心原則は、コードが外部に依存しないことです。 React では、HTML、CSS、JS が強く結合されているため、他のコンポーネントへの影響が回避されます。また、JS で CSS を記述しますが、これには JS での CSS が必要であり、実際にはインラインスタイルを記述します。

しかし、インラインスタイルは疑似クラスとメディアクエリをサポートしていないため、React-JSS のようなライブラリがインラインスタイルを拡張するようになりました。React-JSS のキャメルケース記述方法に耐えられない人もいます。スタイルが登場しました -コンポーネント、CSS 記述標準に準拠したライブラリ、結合されていない記述を好む人もいるため、Css モジュールが登場しますが、Vue のソリューションの方が洗練されていると考え、styled-jsx が登場する人もいます。

要約すると、

CSS-in-JS は本質的にはインラインスタイルですが、これが普及したのはコンポーネント時代の到来によるものです。

JS での CSS の人気の理由を理解すれば、ACSS が人気になる理由、つまりコンポーネント時代の到来が間違いなく推測できるでしょう。 CSS アーキテクチャに基づく CSS コンポーネント。

コンポーネントを使用しない従来の Web 開発の時代に、次のコードのようなスタイルを決定するために 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 中国語 Web サイトの他の関連記事を参照してください。