当前位置: 首页 > news >正文

原子化 CSS 的常见实现框架

原子化 CSS 是一种 CSS 架构方法,其核心思想是将样式拆分为最小粒度的单一功能类,每个类仅对应一个具体的样式属性(如颜色、边距、字体大小等),通过组合这些类来构建复杂的界面。这种方式强调代码复用性、维护性和灵活性,能够显著减少重复代码并提升开发效率。


原子化 CSS 的常见实现框架

  1. Tailwind CSS

    • 特点:提供丰富的预定义原子类(如 text-centerp-4),支持响应式设计和动态配置,通过组合类名快速构建界面。
    • 优势:社区成熟、文档完善,适合需要标准化样式的项目。
    • React 集成:通过 Vite 或 Webpack 安装插件,并配置 tailwind.config.js 即可使用。
  2. UnoCSS

    • 特点:高性能的原子化 CSS 引擎,支持通过预设(如 presetUno)模拟 Tailwind、Bootstrap 等框架的类名,且构建体积更小。
    • 优势:灵活性高,可自定义规则和图标集成(如 Iconify),适合对性能有要求的项目。
    • React 集成:在 Vite 中通过插件配置,支持动态生成样式。
  3. Windi CSS

    • 特点:兼容 Tailwind 语法,但编译速度更快,支持按需生成样式。
    • 适用场景:需要 Tailwind 功能但希望优化构建速度的项目。
  4. Tachyons

    • 特点:轻量级原子化框架,类名语义化(如 f3 表示字体大小)。
    • 适用场景:简单项目或对体积敏感的场景。

React 下的推荐方案

1. Tailwind CSS
  • 推荐理由

    • 生态完善:官方提供 React 集成指南,支持 JSX 中直接使用类名(如 className="flex p-4")。
    • 工具链支持:VS Code 插件可自动补全类名,提升开发效率。
    • 动态样式:可通过模板字符串结合状态变量动态生成类名。
  • 示例配置

    npm install tailwindcss @tailwindcss/vite
    
    // tailwind.config.js
    module.exports = {content: ["./src/**/*.{js,jsx,ts,tsx}"],theme: { extend: {} },
    }
    
2. UnoCSS
  • 推荐理由

    • 高性能:按需生成样式,构建体积显著小于 Tailwind。
    • 灵活性:支持自定义原子规则和图标库集成(如 <div class="i-logos-react" />)。
    • 兼容性:可无缝使用 Tailwind 的类名(如 text-red-500)。
  • 示例配置

    pnpm add -D unocss @unocss/preset-uno
    
    // vite.config.ts
    import Unocss from 'unocss/vite'
    import { presetUno } from 'unocss'export default defineConfig({plugins: [react(), Unocss({ presets: [presetUno()] })],
    })
    

选择建议

  • 优先 Tailwind CSS:适合需要成熟生态和标准化规范的项目,尤其是团队协作场景。
  • 选择 UnoCSS:若追求极致性能或需要高度自定义(如结合图标库),或项目对构建体积敏感。
  • 其他场景:若项目已使用特定 UI 库(如 Chakra UI),可结合其内置的原子化工具。

与传统 CSS 的对比优势

  1. 减少命名冲突:通过原子类名直接描述样式功能,避免全局污染。
  2. 提升复用性:单一职责的类名可在全项目复用,减少重复代码。
  3. 简化维护:修改样式时只需调整单个原子类,无需追踪复杂的选择器层级。

通过合理选择框架,React 开发者可以更高效地实现样式管理,同时保持代码的可维护性。

相关文章:

原子化 CSS 的常见实现框架

原子化 CSS 是一种 CSS 架构方法&#xff0c;其核心思想是将样式拆分为最小粒度的单一功能类&#xff0c;每个类仅对应一个具体的样式属性&#xff08;如颜色、边距、字体大小等&#xff09;&#xff0c;通过组合这些类来构建复杂的界面。这种方式强调代码复用性、维护性和灵活…...

技术速递|使用 GitHub Copilot Agent Mode 进行编程

作者&#xff1a;卢建晖 - 微软高级云技术布道师 翻译/排版&#xff1a;Alan Wang GitHub Copilot 持续发展&#xff0c;从最初的代码补全、生成、优化功能&#xff0c;到通过对话交互提升 AI 代码质量的 GitHub Copilot Chat&#xff0c;再到能够基于项目中多个文件的关联进行…...

Linux系统(Ubuntu和树莓派)的远程操作练习

目录 实验准备一、Ubuntu 下的远程操作二、树莓派下的远程操作三、思考 实验准备 ​ 1.双方应保证处于同一个局域网内 ​ 2.关闭防火墙 (否则别人将不能 ping 通自己,具体说明请参考&#xff1a;windows-关闭防火墙&#xff09; ​ 3.配置虚拟机 ​ a.网桥模式配置 ​ 查询…...

电脑屏保壁纸怎么设置 桌面壁纸设置方法详解

电脑桌面壁纸作为我们每天面对的第一视觉元素&#xff0c;不仅能够彰显个人品味&#xff0c;还能营造舒适的工作或娱乐氛围。电脑桌面壁纸怎么设置呢&#xff1f;下面本文将为大家介绍Windows和macOS两大主流操作系统中设置电脑桌面壁纸的方法&#xff0c;帮助大家快速设置个性…...

为什么选择Redis?解析核心使用场景与性能优化技巧

解析核心使用场景与性能优化技巧 redis只能能操作字符串&#xff0c;要把Java对象存入redis非关系型数据库&#xff0c;需要用序列化变成字符串&#xff0c;再反序列化成Java对象 not only sql NoSQL非关系型数据库&#xff1a;缓存数据库&#xff0c;只能读取数据&#xff0…...

Docker中Redis修改密码失效

docker容器中&#xff0c;我们通过docker run命令运行某一容器 这里&#xff0c;我们通过以下命令来进行运行【注意&#xff0c;这里有两个关键点&#xff1a;-d 和--requirepass】 docker run \ --restartalways \ --log-opt max-size100m \ --log-opt max-file2 \ -p 6379:6…...

质数质数筛

1.试除法判定质数–O(sqrt(N)) bool is_prime(int x) {if (x < 2) return false;for (int i 2; i < x / i; i )if (x % i 0)return false;return true; }2.试除法分解质因数–O(logN)~O(sqrt(N)) void divide(int x) {for (int i 2; i < x / i; i )if (x % i …...

VGA接口设计

1.VGA简介 VGA(Video Graphics Array)视频图形阵列接口是一种模拟信号视频传输标准,用于连接计算机主机和显示设备,如显示器、投影仪等。 VGA接口能够传输红、绿、蓝三原色的模拟信号以及同步信号(数字信号),实现计算机图形和视频信号的输出和显示。 尽管数字化显示接口…...

clickhouse注入手法总结

clickhouse 遇到一题clickhouse注入相关的&#xff0c;没有见过&#xff0c;于是来学习clickhouse的使用&#xff0c;并总结相关注入手法。 环境搭建 直接在docker运行 docker pull clickhouse/clickhouse-server docker run -d --name some-clickhouse-server --ulimit n…...

VsCode保存时删除无用的引用

打开设置文件 教程&#xff1a;打开VsCode设置设置里添加 {"editor.codeActionsOnSave": {"source.organizeImports": false, // 禁用默认的整理导入"source.removeUnusedImports": true // 仅删除未使用的导入} }...

轻松Linux-4.进程概念

屋漏偏逢连夜雨&#xff0c;今天就学Linux 话不多说&#xff0c;展示军火 1.认识冯诺依曼体系 冯诺依曼体系其实并不是什么稀罕的东西&#xff0c;我们生活中的笔记本、服务器、计算机等等大多都遵守冯诺依曼体系 非常经典的一张图 我们所认识的计算机&#xff0c;是由一个个…...

畅游Diffusion数字人(21):基于Wan2.1的音频驱动数字人FantasyTalking

畅游Diffusion数字人(0)&#xff1a;专栏文章导航 前言&#xff1a;AI数字人是目前视觉AIGC最有希望大规模落地的场景之一。现阶段的商业工具&#xff0c;如字节的OminiHuman-1(即梦大师版)、快手的可灵对口型&#xff0c;虽然效果不错&#xff0c;但是收费昂贵。而开源解决方案…...

CentOS禁用nouveau驱动

1、验证 nouveau 是否在运行 lsmod | grep nouveau如果命令返回结果&#xff0c;说明 nouveau 驱动正在运行。 2、编辑黑名单文件 通过编辑黑名单配置文件来禁用 nouveau 驱动&#xff0c;这样在系统启动时不会加载它。 vi /etc/modprobe.d/blacklist-nouveau.conf修改以下…...

《Operating System Concepts》阅读笔记:p587-p596

《Operating System Concepts》学习第 52 天&#xff0c;p587-p596 总结&#xff0c;总计 10 页。 一、技术总结 1.Recovery (1)consistency checking consistency checking 工具&#xff1a;fsck。 (2)log-structure file system (3)WAFL file system 2.Veritas (1)Ve…...

k8s 1.24.17版本部署(使用Flannel插件)

1.k8s集群环境准备 推荐阅读: https://kubernetes.io/zh/docs/setup/production-environment/tools/kubeadm/install-kubeadm/ 1.1 环境准备 环境准备:硬件配置: 2core 4GB磁盘: 50GB操作系统: Ubuntu 22.04.04 LTSIP和主机名:10.0.0.231 master23110.0.0.232 worker23210.0…...

通信协议详解(十):PSI5 —— 汽车安全传感器的“抗干扰狙击手”

一、PSI5是什么&#xff1f; 一句话秒懂 PSI5就像传感器界的“防弹信使”&#xff1a;在汽车安全系统&#xff08;如气囊&#xff09;中&#xff0c;用两根线同时完成供电数据传输&#xff0c;即便车祸时线路受损&#xff0c;仍能确保关键信号准确送达&#xff01; 基础概念…...

Kafka生产者和消费者:数据管道的核心引擎与智能终端

在分布式系统中&#xff0c;数据的高效流动如同人体的血液循环&#xff0c;而Kafka的生产者&#xff08;Producer&#xff09;与消费者&#xff08;Consumer&#xff09;正是驱动这一循环的核心组件。它们不仅是Kafka客户端的基本形态&#xff0c;更是构建实时数据生态的基石。…...

特权FPGA之按键消抖

完整代码如下所示&#xff1a; timescale 1ns / 1ps// Company: // Engineer: 特权 // // Create Date: // Design Name: // Module Name: // Project Name: // Target Device: // Tool versions: // Description: // // Dependencies: // // Revision: // …...

实时比分更新系统的搭建

搭建一个实时比分更新系统需要考虑多个技术环节&#xff0c;以下是一个完整的实现方案&#xff1a; 一、系统架构 1.数据获取层 比分数据API接入&#xff08;如熊猫比分、API-Football等&#xff09; 网络爬虫&#xff08;作为备用数据源&#xff09; 2.数据处理层 …...

【Linux】线程的概念与控制

目录 1. 整体学习思维导图 2. 线程的概念 2.1 基础概念 2.2 Linux下的线程 初步理解&#xff1a; 2. 分页式存储 3.1 页表 3.1.1 页框/页 3.1.2 页表机制 3.1.3 从虚拟地址到物理地址的转换 总结&#xff1a; 3.2 TLB快表 3.3 缺页异常&#xff08;Page Fault&am…...

K8s 老鸟的配置管理避雷手册

Yining, China 引言 对于这种案例&#xff0c;你们的处理思路是怎么样的呢&#xff0c;是否真正的处理过&#xff0c;如果遇到&#xff0c;你们应该怎么处理。 最后有相关的学习群&#xff0c;有兴趣可以加入。 开始 一、血泪教训&#xff1a;环境变量引发的真实灾难 1.1 …...

飞速(FS)解决方案验证实验室搬迁升级,赋能客户技术服务

飞速&#xff08;FS&#xff09;解决方案验证实验室近日顺利完成搬迁升级&#xff0c;标志着飞速&#xff08;FS&#xff09;在解决方案可行性验证、质量保障以及定制化需求支持方面迈上新台阶&#xff0c;进一步提升了产品竞争力和客户信任度。 全新升级的实验室定位为技术验证…...

柔性关节双臂机器人奇异摄动鲁棒自适应PD控制

1 双臂机器人动力学模型 对于一个具有多个关节的机器人来说&#xff0c;机器人端动力学子方程及关节驱动电机端动力学子方程为&#xff1a; 以上为推导过程&#xff0c;MATLAB程序已完成&#xff0c;若需要可找我。...

遵循IEC62304YY/T0664:确保医疗器械软件生命周期合规性

一、EC 62304与YY/T 0664的核心定位与关系 IEC 62304&#xff08;IEC 62304&#xff09;是国际通用的医疗器械软件生命周期管理标准&#xff0c;适用于所有包含软件的医疗器械&#xff08;如嵌入式软件、独立软件、移动应用等&#xff09;&#xff0c;其核心目标是确保软件的安…...

Kafka和RocketMQ相比有什么区别?那个更好用?

Kafka和RocketMQ相比有什么区别?那个更好用? Kafka 和 RocketMQ 都是广泛使用的消息队列系统&#xff0c;它们有很多相似之处&#xff0c;但也有一些关键的区别。具体选择哪个更好用&#xff0c;要根据你的应用场景和需求来决定。以下是它们之间的主要区别&#xff1a; 1. …...

空对象模式(Null Object Pattern)在C#中的实现详解

一 、什么是空对象模式 空对象模模是靠”空对孔象式是书丯一种引施丼文行为,行凌,凌万成,个默疤"空象象象象来飞䛿引用用用用电从延盈盈甘仙丿引用用用职从延务在仅代砷易行行 」这种燕式亲如要目的片片 也说媚平父如如 核心思烟 定义一个人 派一个 &#xfffd; 创建…...

【Windows】Win2008服务器SQL服务监控重启脚本

以下是一个用于监控并自动重启 SQL Server 服务的批处理脚本&#xff0c;适用于 Windows Server 2008 和 SQL Server 2012&#xff08;默认实例&#xff09;&#xff1a; echo off setlocal enabledelayedexpansion:: 配置参数 set SERVICE_NAMEMSSQLSERVER set LOG_FILEC:\SQ…...

Spring MVC 操作会话属性详解(@SessionAttributes 与 @SessionAttribute)

Spring MVC 操作会话属性详解&#xff08;SessionAttributes 与 SessionAttribute&#xff09; 1. 核心注解对比 注解作用范围功能SessionAttributes类级别声明控制器中需要持久化的模型属性&#xff08;存入 HttpSession&#xff09;SessionAttribute方法参数/返回值显式绑定…...

416. 分割等和子集

416. 分割等和子集 给你一个 只包含正整数 的 非空 数组 nums 。请你判断是否可以将这个数组分割成两个子集&#xff0c;使得两个子集的元素和相等。 示例 1&#xff1a; 输入&#xff1a;nums [1,5,11,5] 输出&#xff1a;true 解释&#xff1a;数组可以分割成 [1, 5, 5] 和…...

Composer安装Laravel步骤

Composer安装Laravel步骤 要使用 Composer 安装 Laravel&#xff0c;请按照以下步骤操作&#xff1a; 确保已经安装了 Composer。如果还没有安装&#xff0c;请访问 https://getcomposer.org/download/ 下载并安装。 打开命令行或终端。 使用 cd 命令导航到你的项目目录&…...

游戏引擎学习第209天

调整椅子α 昨天&#xff0c;我们实现了将数据输出到调试流中的功能&#xff0c;之前的调试流大多只包含性能分析数据&#xff0c;而现在我们可以将任意数据放入调试流中。 完成这个功能后&#xff0c;我们接下来要做的是收集这些数据并显示出来&#xff0c;这样我们就能有一…...

更新vscode后链接远程服务器出现了报错‘无法建立连接:远程主机不满足运行vscode服务器的先决条件’20250408

更新了vscode之后再链接远程服务器出现了报错&#xff0c;如下&#xff1a; 1. 确认服务器上的库版本 1.1 检查 glibc 版本 在服务器终端运行&#xff1a; ldd --version 最低要求&#xff1a;VS Code 远程开发需要 glibc ≥ 2.28。 1.2 检查 libstdc 版本 在服务器终端运…...

电磁兼容特种测试

并非所有的检测都能在实验室的标准场地中完成。今天&#xff0c;就带大家走进电磁兼容特种测试中需要现场测试的情况&#xff0c;看看哪些场合和设备有着特殊的测试需求。 哪种场合需要现场测试&#xff1f; 大型设备由于物理尺寸或供电功率上的限制&#xff0c;无法在一般…...

PyTorch 基础要点详解:从模型构建到评估

在深度学习领域&#xff0c;PyTorch 作为一款广受欢迎的开源框架&#xff0c;为开发者提供了便捷高效的工具。今天&#xff0c;我们就深入探讨一下 PyTorch 中的几个关键要点&#xff1a;torch.nn.Linear、torch.nn.MSELoss、model.train() 以及 model.eval()&#xff0c;了解它…...

Dockerfile中CMD命令未生效

今天在使用dockerfile构建容器镜像时&#xff0c;最后一步用到CMD命令启动start.sh&#xff0c;但是尝试几遍都未能成功执行脚本。最后查阅得知&#xff1a;Dockerfile中可以有多个cmd指令&#xff0c;但只有最后一个生效&#xff0c;CMD会被docker run之后的参数替换。 CMD会…...

Linux平台MQTT测试抓包分析

Linux平台搭建MQTT测试环境-CSDN博客基于这里的测试代码抓包 sudo tcpdump -i any -w mqtt1.cap 上述源码中 tcp://localhost:1883 配置连接&#xff1a; Broker Address: localhostPort: 1883 整体通信流程 1. Subscriber和Broker&#xff08;代理服务器&#xff09;建立…...

Docker全方位指南

目录 前言 第一部分&#xff1a;Docker基础与安装 1.1 什么是Docker&#xff1f; 1.2 Docker的适用场景 1.3 全平台安装指南 1.4 配置优化 第二部分&#xff1a;Docker核心操作与原理 2.1 镜像管理 2.2 容器生命周期 2.3 网络模型 2.4 Docker Compose 第三部分&…...

【经典DP】三步问题 / 整数拆分 / 不同路径II / 过河卒 / 下降路径最小和 / 地下城游戏

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;动态规划 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 动态规划总结Fibonacci数列BC140 杨辉三角杨辉三角三步问题最小花费爬楼梯孩子们的游戏解码方法整数拆分不同路径不同路径II过…...

Koji/OBS编译节点OS版本及工具版本管理深度实践指南

引言 在分布式编译框架Koji/OBS中&#xff0c;有效管理编译节点的操作系统&#xff08;OS&#xff09;版本及工具版本是确保构建环境稳定性、兼容性和安全性的关键。本文将从多版本共存、自动化更新、兼容性管理等多个维度&#xff0c;系统阐述如何高效管理编译节点的OS版本及…...

39、web前端开发之Vue3保姆教程(三)

四、Vue3中集成Element Plus 1、什么是Element Plus Element Plus 是一款基于 Vue 3 的开源 UI 组件库,旨在为开发者提供一套高质量、易用的组件,用于快速构建现代化的 web 应用程序。 Element Plus 提供了大量的 UI 组件,包括但不限于: 表单组件:输入框、选择器、开关…...

多类型医疗自助终端智能化升级路径(代码版.下)

医疗人机交互层技术实施方案 一、多模态交互体系 1. 医疗语音识别引擎 # 基于Wav2Vec2的医疗ASR系统 from transformers import Wav2Vec2Processor, Wav2Vec2ForCTC import torchaudioclass MedicalASR:def __init__(self):self.processor = Wav2Vec2Processor.from_pretrai…...

Git代码管理

这里写目录标题 分支管理策略TrunkBased&#x1f331; 核心理念✅优点❌缺点适用场景 GitFlow✅ GitFlow 的优点❌ GitFlow 的缺点适用场景 AOneFlow✅ AOneFlow 的优点❌缺点适用场景 如何选择分支策略&#xff1f;代码提交规范&#x1f331;分支管理&#x1f504;代码更新⚔️…...

CubeMX配置STM32F103PWM连续频率输出

要求&#xff1a; 输出2-573Hz频率&#xff0c;输出频率步长小于1Hz 一、CubeMX配置 auto-reload preload在下个周期加载ARR Output compare preload 在下个周期加载CCR 二、 程序 1.启动PWM输出 HAL_TIM_PWM_Start(&htim2,TIM_CHANNEL_1); 2.根据频率调整PSC、ARR、…...

举例说明计算机视觉(CV)技术的优势和挑战。

计算机视觉(CV)技术是人工智能领域的一个重要分支,通过让计算机“看”和“理解”图像或视频,可以实现许多实际应用。以下是计算机视觉技术的优势和挑战的例子: 优势: 自动化处理:CV技术可以自动化地处理大量图像或视频数据,实现快速而准确的分析和识别。提高效率:在许…...

工程师 - FTDI SPI converter

中国网站&#xff1a;FTDIChip- 首页 UMFT4222EV-D UMFT4222EV-D - FTDI 可以下载Datasheet。 UMFT4222EVUSB2.0 to QuadSPI/I2C Bridge Development Module Future Technology Devices International Ltd. The UMFT4222EV is a development module which uses FTDI’s FT4222H…...

河畔石上数(C++)

在 C 里&#xff0c;std::set 是标准模板库&#xff08;STL&#xff09;提供的一种关联容器&#xff0c;它能高效地存储唯一元素&#xff0c;并且元素会按照特定的顺序排列&#xff0c;默认是升序。下面从多个方面为你详细介绍 std::set。 1. 头文件包含 若要使用 std::set&a…...

《线性表、顺序表与链表》教案(C语言版本)

&#x1f31f; 各位看官好&#xff0c;我是maomi_9526&#xff01; &#x1f30d; 种一棵树最好是十年前&#xff0c;其次是现在&#xff01; &#x1f680; 今天来学习C语言的相关知识。 &#x1f44d; 如果觉得这篇文章有帮助&#xff0c;欢迎您一键三连&#xff0c;分享给更…...

【用Cursor 进行Coding 】

「我」&#xff1a;“添加 XXX 功能” &#xff3b;Claude-3.7&#xff3d;:“好的&#xff0c;我完成了&#xff0c;还顺手做了 19个你没要求不需要的功能、甚至还修改了原有999行正常代码 &#xff5e; 不用谢” &#xff3b;Gemini-2.5&#xff3d;:“好的&#xff0c;我会…...

vue2 打包时增加时间戳防止浏览器缓存,打包后文件进行 js、css 压缩

文章目录 前言一、什么是浏览器缓存二、展示效果三、vue.config.js 代码四、代码压缩部分服务器不支持五、感谢 前言 vue 开发过程中&#xff0c;项目前端代码需要更新&#xff0c;更新后由于浏览器缓存导致代码没有及时更新所产生错误&#xff0c;所以在打包时增加时间戳防止…...

TIM定时器

一、TIM定时器 STM32高级定时器实战&#xff1a;PWM、捕获与死区控制详解-CSDN博客 二、相关函数 1.TIM_TimeBaseInitTypeDef结构体讲解 typedef struct {uint16_t TIM_Prescaler; // 预分频器&#xff0c;用于设置定时器计数频率uint16_t TIM_CounterMode; /…...