网站制作实例,重庆制作网站模板建站公司,网站优化培训机构,html5 php 网站源码最近合作在写一个vue3ts的项目#xff0c;看到其他人用了一种写法#xff0c;我觉得很奇怪#xff0c;之前没见过#xff0c;他是这样写的 div classnews flex-1 h-40px flex/div我不理解的是为什么这样写就会让这个div的高度就是40px,好多代码…最近合作在写一个vue3ts的项目看到其他人用了一种写法我觉得很奇怪之前没见过他是这样写的 div classnews flex-1 h-40px flex/div我不理解的是为什么这样写就会让这个div的高度就是40px,好多代码都是这样我去css里边搜索发现并没有额外设置什么带着好奇我就搜了一下原来是Windi CSS的用法。
介绍
通过扫描HTML和CSS并按需生成实用程序Windi CSS能够在开发中提供更快的加载时间和快速的HMR并且不需要再生产中进行清除。 Windi CSS支持Tailwind CSS的所有实用程序无需任何额外配置。 UnoCSS是一个具有高性能且极具灵活的即时原子化CSS引擎具有按需加载的特性。原子化CSS是一种CSS的架构方式它倾向于小巧且用途单一的class,并且会以视觉效果进行命名。
对比
Windi CSS相比于Tailwind CSS具有按需加载零依赖等特性。在CSS文件打包的大小与加载速度上有很大的提升。
基本用法
import virtual:windi.cssdiv classspace-y-0.5p classtext-lg text-black font-semiboldErin Lindford/pp classtext-gray-500 font-mediumProduct Engineer/p/div原子化CSS的优势
1.提高开发效率 利用原子化框架提供的预设原子类在少量样式编写上可以极大的提高开发效率不需要单独定义在样式文件中 2.免去起名烦恼 我们经常会因为起名而烦恼之前也尝试过各种css命名方法包括BEM,然而当html层级嵌套比较深的情况下BEM命名法也会有起名难不直观的缺陷 3.避免样式堆积 可以很好的避免你是样式的堆积不存在你是样式类的不敢删除问题有效的减少CSS的体积 4.样式隔离 天然的支持组件间的样式隔离没有自定义的css也就无需担心组件之间样式的影响。
默认单位
默认单位是rem, 1rem 16px;
