[Yuan Chuang Conference プレビュー] 1024 プログラマーズデー (2 日前)、オープンソース中国オフィスに集合、AI について話しましょう! >>>

1.アトマイズCSSとは何ですか?

アトミック CSS は、視覚的な機能に基づいた名前を持つ小さな単一目的のクラスを優先する CSS アーキテクチャへのアプローチです。アトミック CSS とは何かを正確に定義しましょう

上記の意味を直訳すると、アトミック CSS は、単一目的で単純な CSS を使用する傾向がある CSS アーキテクチャ手法です。通常、クラスの名前は視覚効果に基づいて付けられます。BEM ルール CSS とは異なり、CSS に対するアトミックな手段が分割されており、それぞれスタイルには独自の CSS ルールがあります。例は次のとおりです。各スタイルは固定のクラス名で構成されます。

// margin为0px
.m-0{
    margin:0px;
}
// 文字为红色
.text-red{
    color:red;
}
.font-blod{
  font-weight:blod;
}
.text-center{
   text-align:center;
}

// 样式使用方式
 <div class = "m-10 text-center text-red font-bold font-size-[48px]">你好原子化CSS</div>

スタイル効果は次のとおりです。

現在、 Tailwind CSS、Windi CSS、Tachyonなど、多くのアトミックフレームワークが存在します。

2. CSS をアトミック化する理由は何ですか?

従来の方法では、たとえば、次に示すように、scss プリプロセッサを使用して必要なクラスを生成します。

@for $i from 1 through 10 {
  .m-#{$i} {
    margin: $i px;
  }
}
// 结果为：
.m-1 { margin: 1 px; } 
.m-2 { margin: 2 px; } 
/* ... */ 
.m-10 { margin: 10 px; }

上記の方法では、多くのシナリオで使用できるクラスが生成され、多くのシナリオをカバーできますが、その多くは使用されず、冗長性が多くなるため、これもアトマイズ CSS で最適化されています。オンデマンド読み込みの概念に基づいたプリセットによる CSS の実装。

元の記述方法と比較して、細分化された CSS を適用すると、CSS の記述作業が大幅に削減され、新しいスタイルが追加されるたびに追加される繰り返しコードが削減されます。たとえば、プロジェクト内のフレックスとマージンの設定は、通常、次を使用して何度も記述されます。アトミック CSS CSS でこれらのスタイルを書き直す必要はなく、対応するクラス名を直接バインドすることで同じ効果が得られるため、コード全体の行数とプロジェクト内の無駄な作業負荷が削減されます。

スタイル記述レベルでは、CSS の前処理と後処理は別個のスタイルシートに大きく依存します。アトマイズ CSS は Sass と Less を最大限に活用できます。CSS プリプロセッサ関数がスタイルを記述するのを待ち、PostCSS を使用してさらに強化できます。 CSSの機能。インラインスタイルに関しては、前処理と後処理を使用して処理することが技術的にサポートされていますが、これに対するサポートとメンテナンスを提供する成熟したツールはほとんどありません。

一貫性レベルでは、アトミック CSS フレームワークには通常、事前定義されたデザインシステムがあり、開発者はデザインシステムに設定する値を選択することしかできません。インラインスタイルまたは従来の CSS クラス定義の場合、設定できる値に制限はありません。インラインスタイルまたは従来の CSS クラス設定の場合、ラベルのフォントサイズは 14px または 0.875rem である可能性がありますが、製品 (または顧客) がそれより小さく調整する必要があると言われた場合、開発者 A は 13px に調整することがあります。開発者 B はそれを 12px に調整するかもしれません。しかし、アトミック CSS フレームワークの場合、これを拒否するということは、クラス設定を text-sm から text-xs に変更することを意味します。

一般に、アトマイズ CSS は CSS のサイズを削減し、CSS クラスの再利用率を向上させ、クラス名の複雑さを軽減しますが、複数の CSS スタイルが蓄積されるため、クラス名が長すぎるという欠点が生じる可能性があります。同時に、CSS スタイルのメモリコストも増加します。

では、現在アトミック CSS を使用しているのは誰でしょうか?

githubやswiper.jsなどのアトミック CSS を使い始めている Web サイトもあります。↓下の図に示すように、ページの CSS タイプからアトミック CSS を使用していることがはっきりとわかります。

3. 細分化された CSS フレームワーク - UnoCss

UnoCSS はフレームワークではなくエンジンです。コアツールクラスを提供せず、すべての機能はプリセットとインライン構成を通じて提供できるためです。

Viteのオンデマンド読み込みコンセプトと同様に、unocss はパッケージ化と使用方法を提供し、メモリを大幅に削減し、実行速度を向上させます。また、拡張のためのプラグインプリセットも提供し、ルール検証にカスタムルールを使用できます。個別の開発の。

UnoCSS公式サイトリンク

具体的な使い方は以下の通りです。

1. 環境をセットアップする

プロジェクトのノードのバージョンが 16 以上であることを確認してください

pnpm add -D @unocss/preset-uno

2. 構成を変更する

2.1 vite.config.js を変更する

以下のコードに示すように、Unocss が導入されています

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
import UnoCSS from 'unocss/vite'
export default defineConfig(({command, mode})=>({
 plugins: [
  vue(),
  viteCompression(),
  UnoCSS({configFile: '../uno.config'}) 
 ]
 })  // 引入下文配置好的config文件

2.2uno.config.jsの作成

import {
    defineConfig,
    presetAttributify,
    presetIcons,
    presetTypography,
    presetUno,
    presetWebFonts,
    transformerDirectives,
    transformerVariantGroup
  } from 'unocss'
import presetUno from '@unocss/preset-uno'
export default defineConfig({
   rules: [
        [/^mg-0.([\.\d]+)$/, ([_, num]) => ({ margin: `(${num}px)` })],
    ],
    shortcuts: [
      // ...
    ],
    theme: {
      colors: {
        // ...
      }
    },
    presets: [
      presetUno(),
      presetAttributify(),
      presetTypography(),
      presetWebFonts({
        fonts: {
          // ...
        }
      })// 使用自带的内部预设，按需引用
    ] 
    transformers: [transformerDirectives(), transformerVariantGroup()] })

3.UnoCSS の複数の機能:

3.1 カスタムスタイルのルール:

config.js でルールをカスタマイズできます。たとえば、mb-300px が公式です。構成ファイル内の通常のルールをカスタマイズしたため、以下に mg-10 と書くことができます。これは、margin: 10px; を表します。

ルール設定コードは次のとおりです。

 rules: [ [/^mg-0.([\.\d]+)$/, ([_, num]) => ({ margin: `(${num}px)` })], ],

3.2 アイコン:

<!-- A basic anchor icon from Phosphor icons -->
<div class="i-ph-anchor-simple-thin" />
<!-- An orange alarm from Material Design Icons -->
<div class="i-mdi-alarm text-orange-400" />
<!-- A large Vue logo -->
<div class="i-logos-vue text-3xl" />
<!-- Sun in light mode, Moon in dark mode, from Carbon -->
<button class="i-carbon-sun dark:i-carbon-moon" />
<!-- Twemoji of laugh, turns to tear on hovering -->
<div class="i-twemoji-grinning-face-with-smiling-eyes hover:i-twemoji-face-with-tears-of-joy" />

表示効果は以下の通りで、マウスを動かすと回転などのアニメーションが行われます。

3.3 属性モード:

通常モードと比較すると、読みやすく保守しやすくなっており、2 つのモードと比較して、属性モードスタイルはより直観的で読みやすいです。

//使用属性模式和普通模式进行对比：
// 普通模式：
<div class="bg-blue-400 hover:bg-blue-500 text-sm text-white py-2 px-4 border-2 rounded border-blue-200">普通模式 </div>
//属性模式
<div 
  bg="blue-400 hover:blue-500"
  text="sm white"
  font="mono light"
  p="y-2 x-4"
  border="2 rounded  blue-200"
>
  属性模式
</div>

効果は次のとおりです。

同時に、 vscode にUnoCSS プラグインをインストールすると、コードを書くときにプロンプトが表示されます。CSS スタイル上に配置すると、特定の CSS スタイルが表示され、開発が容易になります~下の図に示すように、コードのプロンプトが表示されます。 ; クラス名を記述するプロセス中に提供されるため、非常に使いやすいです。

4. 個人的な感情

UnoCSS を使っていく中で、<style></style> を書かなくて済む楽しさを感じています CSS ファイルと VUE ファイルを前後に散りばめる必要がありません CSS クラス名も気軽に書けます頭を悩ませてクラス名を考えるととても便利ですが、スタイルの問題をすぐに見つけられずに混乱が生じるという、一定の困難もあります。

全体として、UnoCSS にはまだ探索する価値のある場所がたくさんあります。ここでは、私が興味深いと思う場所のほんの一部を紹介します。オープンソースプロジェクトには常に多くのバグが解決を待っています。一緒に議論しましょう~

著者：京東保険卓亜謙

出典：JD Cloud Developer Community 転載の際は出典を明記してください

何？? ? CSSも細分化できる！| JDクラウド技術チーム

1.アトマイズCSSとは何ですか?

2. CSS をアトミック化する理由は何ですか?

3. 細分化された CSS フレームワーク - UnoCss

1. 環境をセットアップする

2. 構成を変更する

2.1 vite.config.js を変更する

2.2uno.config.jsの作成

3.UnoCSS の複数の機能:

3.1 カスタムスタイルのルール:

3.2 アイコン:

3.3 属性モード:

4. 個人的な感情

おすすめ

何？? ? CSSも細分化できる！| JDクラウド技術チーム

1.アトマイズCSSとは何ですか?

2. CSS をアトミック化する理由は何ですか?

3. 細分化された CSS フレームワーク - UnoCss

1. 環境をセットアップする

2. 構成を変更する

2.1 vite.config.js を変更する

2.2uno.config.jsの作成

3.UnoCSS の複数の機能:

3.1 カスタムスタイルのルール:

3.2 アイコン:

﻿3.3 属性モード:

4. 個人的な感情

おすすめ

3.3 属性モード: