CSS原子化

devtools/2024/9/20 7:28:16/ 标签: css, 前端

目录

一、定义

二、原子化工具

2.1、tailwind

2.1.1、以PostCss插件形式安装

2.1.2、不依赖PostCss安装

2.1.3、修改原始配置

css-toc" style="margin-left:40px;">2.2、unocss

三、优缺点

3.1、优点

3.2、缺点

一、定义

定义:使用一系列的助记词,利用类名来代表样式

二、原子化工具

2.1、tailwind

翻译过来是“顺风”的意思。

官网:Installation - Tailwind CSS

2.1.1、以PostCss插件形式安装

如果是单纯的文件夹:

(1)、初始化:npm init -y

(2)、安装3个插件:npm i tailwindcss postcss-cli autoprefixer -D

(3)、生成相关配置文件:npx tailwind init -p

(4)、在文件夹里新建src,在sc下新建style.css

@tailwind base;
@tailwind components;
@tailwind utilities;

(5)、将package.json里"scripts"的内容改为:"build": "postcss src/style.css -o dist/tailwind.css"

(6)、npm run build 成功后就可以看到dist/tailwind.css,即编译成功。(注意:node版本一定在16+,不然编译报错。)

(7)、以index.html为例:

<link rel="stylesheet" href="tailwind.css">
<div class="text-base p-1 border border-black border-solid"></div>
//==========================等同于==============================
.text-base {font-size: 16px;
}
.p-1 {padding: 4px;
}
.border {border-width: 1px;
}
.border-black {border-color: black;
}
.border-solid {border-style: solid;
}

剩下的官网里都有,可以自己去找。

2.1.2、不依赖PostCss安装

几乎和上面一样,就是这两个命令行npm i tailwindcss autoprefixer -Dnpx tailwind init稍有改变,配置文件内容变成了   "build": "tailwind build src/style.css -o dist/tailwind.css"。

2.1.3、修改原始配置

以“text-base”为例:

数组里的两个元素分别是 font-size 和 line-height 两个样式。

module.exports = {content: [],theme: {extend: {padding: {'1': '30px'},fontSize: {'base': ['30px', '2rem']}},},plugins: [],
}
//================修改后的p-1和text-base
.p-1 {padding:30px;
}
.text-base {font-size:30px;line-height:2rem;
}

原子类名太多很难记住,不能每次都去查看文档,可以安装插件Tailwind CSS IntelliSense解决。

css">2.2、unocss

UNO翻译过来是“联合国组织”的意思。

官网:UnoCSS: The instant on-demand Atomic CSS engine

原子类名太多很难记住,不能每次都去查看文档,可以安装插件UnoCss或者To Unocss解决。

(1)、安装:

npm i unocss @iconify-json/ep @unocss/preset-rem-to-px @unocss/transformer-directives -D

@iconify-json/ep ==> 是Element Plus图标库 Icônes;

@unocss/preset-rem-to-px ==> 将unocss自带的rem转为px;

@unocss/transformer-directives ==>可以使用@apply、@screen、theme函数

(2)、vite.config.ts:

import UnoCSS from 'unocss/vite'
import { defineConfig } from 'vite'
export default defineConfig({plugins: [UnoCSS(),],
})

(3)、创建一个 uno.config.ts文件:

import presetRemToPx from '@unocss/preset-rem-to-px'
import transformerDirectives from '@unocss/transformer-directives'
import { defineConfig, presetAttributify, presetUno, transformerVariantGroup, presetIcons } from 'unocss'
export default defineConfig({presets: [presetAttributify(),presetUno(),presetRemToPx({baseFontSize: 4}),//eg:mt-1或转换为margin-top:1pxpresetIcons({scale: 1.2,warn: true})//自动引入图标配置],transformers: [transformerVariantGroup(), transformerDirectives()],rules: [// m-1可转换为margin:0.25rem// [/^m-(\d+)$/, ([, d]) => ({ margin: `${d / 4}rem` })],],//自定义配置项shortcuts: [{'flex-center': 'flex items-center justify-center',//垂直居中'flex-end': 'flex items-center justify-end',//放在最后'flex-middle': 'flex items-center',//垂直居中'flex-between': 'flex items-center justify-between',//分开两边'flex-col-center': 'flex flex-col justify-center',//竖着居中}]//自定义属性  一个属性可以对应多个unocss类值
})

(4)、main.ts全局配置:

import 'virtual:uno.css'

(5)、使用:

(6)、图标应用:

<div i-ep:dish></div>
<i w110 h100 block i-ep:switch-button></i>

三、优缺点

3.1、优点

(1)、随着业务增长,css文件大小的增长放缓了;

(2)、HTML结构可以随处移动,同样样式不变;

(3)、样式会随着HTML结构删除的同时一起被删除

(4)、节省了为类名取名字的精力。

3.2、缺点

(1)、定义原子类(记住类名)耗费精力;

(2)、HTML结构变得臃肿

(3)、团队合作时,解读其他成员代码耗费时间;

原子化工具还有windi...等等,这里着重介绍上面两种。


http://www.ppmy.cn/devtools/58241.html

相关文章

算法力扣刷题 三十二【239. 滑动窗口最大值】

前言 栈和队列篇。 记录 三十二【239. 滑动窗口最大值】 一、题目阅读 给你一个整数数组 nums&#xff0c;有一个大小为 k 的滑动窗口从数组的最左侧移动到数组的最右侧。你只可以看到在滑动窗口内的 k 个数字。滑动窗口每次只向右移动一位。 返回 滑动窗口中的最大值 。 示…

Redis Stream:实时数据流的处理与存储

Redis Stream:实时数据流的处理与存储 引言 在当今数据驱动的世界中,实时数据处理和存储成为了许多应用的核心需求。Redis Stream作为一种新兴的数据结构,为Redis带来了强大的流处理能力。本文将深入探讨Redis Stream的特点、使用场景以及如何高效地利用它来处理实时数据流…

WPF UI 3D 多轴 机械臂 stl 模型UI交互

1、三维插件环境调整 2、动态模型材质处理 3、动态模型鼠标交互 4、模型旋转基本思路 5、六轴机械臂节点旋转处理 6、更多HelixToolkit插件处理案例 7、快速对接Blender模型 鼠标交互&#xff08;没有强调场景的变换&#xff09; 鼠标命中测试&#xff08;HitTest 不推荐&…

算法力扣刷题 三十五【二叉树基础和递归遍历】

前言 进入二叉树学习。 继续。 一、二叉树基础理论 理论篇——参考链接 以下是大纲&#xff1a; 二、遍历方式 学习递归法实现前、中、后遍历方法。 “输入”阶段 此处用了第一次递归法实现 根据题目的双指针操作&#xff0c;传递递归的参数。 解释递归 &#xff08;1&…

Github绑定自己的域名

Github绑定自己的域名 1.注册自己的域名2.在GitHUb上创建一个自己的仓库&#xff0c;添加域名2.1 创建仓库2.2 添加域名2.3 在Setting中将域名添加到Custom domain中 3.添加域名解析获取ip地址4.在阿里云修改域名解析记录5.ping 域名即可成功 详细内容可参该博客&#xff1a; …

java面试-java基础(上)

文章目录 一、什么是Java&#xff1f;特点&#xff1f;二、什么是JVM、JDK、JRE&#xff1f;三、java跨平台实现原理四、java数据类型有哪些?五、char能不能存一个中文汉字?六、存在数字i加1小于i或者i减1小于i?七、什么是自动类型转换与强制类型转换?八、什么是装/拆箱&am…

【qt】如何获取网卡的信息?

网卡不只一种,有有线的,有无线的等等 我们用QNetworkInterface类的静态函数allInterfaces() 来获取所有的网卡 返回的是一个网卡的容器. 然后我们对每个网卡来获取其设备名称和硬件地址 可以通过静态函数humanReadableName() 来获取设备名称 可以通过静态函数**hardwareAddre…

精通Perl正则表达式修饰符:提升文本处理能力的艺术

Perl语言以其强大的文本处理能力而闻名&#xff0c;其中正则表达式是其核心特性之一。正则表达式本身非常强大&#xff0c;但Perl提供的修饰符&#xff08;Modifiers&#xff09;进一步扩展了正则表达式的灵活性和表达能力。本文将深入探讨Perl中正则表达式修饰符的使用&#x…

3-7 使用深度学习解决温度即示数问题

3-7 使用深度学习解决温度即示数问题 直接上代码 %matplotlib inline import matplotlib.pyplot as plt import numpy as np import torch torch.set_printoptions(edgeitems2, linewidth75)设置Jupyter Notebook在单元格中内嵌显示图像&#xff0c;导入所需库并设置PyTorch的…

如何用CSS3画一条0.5px的直线?

在 CSS 中&#xff0c;实际上无法直接指定 0.5px 的线条粗细&#xff0c;因为 CSS 中的像素单位是最小单位&#xff0c;通常无法表示小数像素。但是&#xff0c;可以通过一些技巧来模拟出看起来像是 0.5px 粗细的线条&#xff0c;例如使用伪元素和缩放等技巧。 以下是一种近似…

vue 中 使用腾讯地图 (动态引用腾讯地图及使用签名验证)

在设置定位的时候使用 腾讯地图 选择地址 在 mounted中引入腾讯地图&#xff1a; this.website.mapKey 为地图的 key // 异步加载腾讯地图APIconst script document.createElement(script);script.type text/javascript;script.src https://map.qq.com/api/js?v2.exp&…

QT C++(QT控件 QLabel,QLCDNumber,QProgressBar,QCalendarWidget)

文章目录 1. QLabel2. QLCDNumber3. QProgressBar4. QCalendarWidget 1. QLabel QLabel常见属性&#xff1a; text&#xff1a;QLabel中的文本textFormat&#xff1a;文本中的格式 Qt::PlainText:纯文本Qt::RichText:富文本&#xff0c;支持html标签Qt::MarkdownText markdow…

本地部署 SenseVoice - 阿里开源语音大模型

本地部署 SenseVoice - 阿里开源语音大模型 1. 创建虚拟环境2. 克隆代码3. 安装依赖模块4. 启动 WebUI5. 访问 WebUI 1. 创建虚拟环境 conda create -n sensevoice python3.11 -y conda activate sensevoice 2. 克隆代码 git clone https://github.com/FunAudioLLM/SenseVoic…

谈面向任务的多轮对话系统(TOD)

面向任务对话系统&#xff08;Task-Oriented Dialogue (TOD) Systems)主要是为解决特定任务的&#xff0c;比如订票任务&#xff08;订机票&#xff0c;电影票等&#xff09;&#xff0c;预定饭店等。这种对话往往需要多轮对话才能够完成。 多轮对话的例子 客户预定一个餐厅的…

关于GIS的概念方面在前端编程中的理解

关于GIS的概念方面在前端编程中的理解 一. 什么是gis二. 关于地球的建模(了解)三. GIS坐标系表现形式四.GIS的数据4.1 矢量数据4.2 栅格数据4.3 矢量数据和栅格数据的不同 一. 什么是gis 地理坐标系统&#xff0c;其目的就是通过地理坐标系可以确定地球上任何一点的位置。 二. …

《梦醒蝶飞:释放Excel函数与公式的力量》8.3 COUNTBLANK函数

8.3 COUNTBLANK函数 在数据处理和分析中&#xff0c;我们经常需要识别和统计数据集中的空白单元格。COUNTBLANK函数是Excel中用于统计某个范围内空白单元格数量的强大工具。 8.3.1 函数简介 COUNTBLANK函数用于统计指定范围内的空白单元格数量。这在数据清洗、数据完整性检查…

【笔记】记一次在linux上通过在线安装mysql报错 CentOS 7 的官方镜像已经不再可用的解决方法+mysql配置

报错&#xff08;恨恨恨恨恨恨恨&#xff01;&#xff01;&#xff01;&#xff01;&#xff01;&#xff09;&#xff1a; [rootlocalhost ~]# sudo yum install mysql-server 已加载插件&#xff1a;fastestmirror, langpacks Determining fastest mirrors Could not retrie…

回溯算法-以医院信息管理系统为例

1.回溯算法介绍 1.来源 回溯算法也叫试探法&#xff0c;它是一种系统地搜索问题的解的方法。 用回溯算法解决问题的一般步骤&#xff1a; 1、 针对所给问题&#xff0c;定义问题的解空间&#xff0c;它至少包含问题的一个&#xff08;最优&#xff09;解。 2 、确定易于搜…

hdu物联网硬件实验2 GPIO亮灯

学院 班级 学号 姓名 日期 成绩 实验题目 GPIO亮灯 实验目的 点亮三个灯闪烁频率为一秒 硬件原理 无 关键代码及注释 const int ledPin1 GREEN_LED; // the number of the LED pin const int ledPin2 YELLOW_LED; const int ledPin3 RED…

Linux Mac 安装Higress 平替 Spring Cloud Gateway

Linux Mac 安装Higress 平替 Spring Cloud Gateway Higress是什么?传统网关分类Higress定位下载安装包执行安装命令执行脚本 安装成功打开管理界面使用方法configure.shreset.shstartup.shshutdown.shstatus.shlogs.sh Higress官网 Higress是什么? Higress是基于阿里内部的…