likes
comments
collection
share

🌷Windi CSS🌷的入门使用，看这一篇就够了！

作者站长头像
站长
· 阅读数 24

🌷Windi CSS🌷的入门使用，看这一篇就够了！

前言

这两周项目开周会，会上讨论了样式使用的问题，由于我们的项目是基于Monorepo技术搭建的，里面包含了若干个项目，每个项目使用二次封装的公共组件库。但是由于这些项目是最近搭建的，以前也是彼此独立，每个开发者也是独立会写自己的页面样式，导致大量的global和important样式和自定义样式存在，会进一步导致现在的项目UI统一和升级遭遇巨大的挑战。基于上述理由，我们组内决定后面尽量使用Windi CSS的样式，尽量不写页面的less样式文件。 但是由于我以前还是没有使用过Windi CSS，鉴于此，这几天学习了有关于Windi CSS的知识，并在学习后，整理输出文档，毕竟好记性不如烂笔头，人到中年，记忆力还是有点逐步衰退的。

介绍

Windi CSS 是下一代工具优先的 CSS 框架。

Windi CSS中文专网

如果你已经熟悉了 Tailwind CSS，可以把 Windi CSS 看作是按需供应的 Tailwind 替代方案，它为你提供了更快的加载体验，完美兼容 Tailwind v2.0，并且拥有很多额外的酷炫功能。

Windi CSS是一个现代且快速的实用型CSS框架，旨在帮助您快速高效地构建网站。它类似于Tailwind CSS，但与之有一些关键区别，例如更快的构建时间、更小的文件大小和更好的开发者体验。 Windi CSS具有高度可定制性，并可以通过插件进行扩展，以满足您特定的需求。它还提供预构建的组件和实用程序，以帮助您创建响应式和易访问的网站。总的来说，Windi CSS是一个强大的工具，适合前端开发人员简化工作流程并构建高质量的网站。

安装与使用

我们的项目是基于React+Vite,按照官网文档进行安装与使用。

安装 安装相关包：

npm i -D vite-plugin-windicss windicss

然后，在你的 Vite 配置中添加插件：

vite.config.js
import WindiCSS from 'vite-plugin-windicss'
​
export default {
  plugins: [
    WindiCSS(),
  ],
}

最后，在你的 Vite 入口文件中导入 virtual:windi.css：

main.js
import 'virtual:windi.css'

现在可以在你的应用中开始使用 classes 工具类 或者 CSS 指令 ，感受一下速度吧！⚡️

预备知识

自动值推导

Windi CSS 只会生成你使用的 CSS 工具类，它允许你在样式类中编写任意值，同时会根据适当的语义生成相应的样式。

<!-- 尺寸和定位 -->
<div class="p-5px mt-[0.3px]"></div>

<!-- 颜色 -->
<button class="bg-hex-b2a8bb"></button>
<button class="bg-[#b2a8bb]"></button>
<button class="bg-[hsl(211.7,81.9%,69.6%)]"></button>

<!-- grid template -->
<div class="grid-cols-[auto,1fr,30px]"></div>

当你想有意忽略你的设计系统，并且对特定的组件有一定的粒度控制时，这是非常有用的。直接的 p-5px 和 显示转义的 p-[5px] 都是被支持的。

转义方法[]

在 Windi CSS 中，可以使用方括号 [] 来进行显示转义（Escape）。这意味着您可以在类名中使用方括号直接使用具体的值，例如：98px,100%,#fff等等。

分数#：直接使用数字，会默认除以4，单位为rem

p-{float} -> padding: {float/4}rem;
p-2.5
p-3.2

.p-2.5 {
  padding: 0.625rem;
}
.p-3.2 {
  padding: 0.8rem;
}

尺寸#:可直接使用尺寸+单位或者使用显示转义方法

// {size} 应当以 rem|em|px|vh|vw|ch|ex 结尾
p-{size} -> padding: {size};
p-3px
p-4rem

.p-3px {
  padding: 3px;
}
.p-4rem {
  padding: 4rem;
}

负数:可使用将负号提到类前面或者使用显示转义方法：

-top-10px
top-[-10px]

分数#：:可使用数字除法或者使用显示转义方法

w-{fraction} -> width: {fraction -> percent};
w-9/12

.w-9/12 {
  width: 75%;
}
.w-[50%] {
   width: 50%;
}

颜色#：:可显示转义方法

bg-[#fff]

函数

height-[calc(100%-20px)]

注意：这样使用calc时，中间不要加空格，否则会不生效。

可变修饰组

通过使用括号对相同的工具类进行编组，将其应用于同一可变修饰。

<div class="hover:(bg-gray-400 font-medium) bg-white font-light"/>

Important 前缀

你可以在任意工具类的前面使用 ! 前缀，使它们变为 !important。当你想覆盖之前的样式规则中指定的属性时，这个会非常有用。

!text-green-300

重点知识

我们平时在项目中使用CSS类名给元素添加样式时，对应类名一般具有语义化，这里的语义是针对项目而言的。而使用Windi CSS，在元素上添加的类名，是针对CSS而言的，我们看到元素上的Windi CSS类，可以大概知道它对应的样式。 譬如：

<div className='h-350px p-10px mb-10px'></div>

我们大概可以猜到，它对应的样式应该为：

height: 350px;
padding: 10px;
margin-bottom: 10px;

那使用Windi CSS替换CSS/Less等，就是在元素上添加对应样式在Windi CSS中的类名。 那现在的重点就是在已知的css样式时，怎么反推它对应的类名。

一共有三种方案可供选择：

  • 写样式时，打开Windi CSS对应官网，找到样式对应的类名添加
  • 记住常用的css样式对应的Windi CSS类名，然后在不确定的情况下，再借助官网。
  • 我们使用VS Code编程，那VS Code有没有对应的插件辅助我们写Windi CSS呢？答案是有的，但是这里我们一般要先写出前面的类的字母，插件才会有选择数据让我们选择，并提供对应的CSS样式。

毫无疑问，第一种方案是最安全的，当然也是最费力的，一般适合于初学者。第二种方案需要投入前期的学习成本，但后面使用时，也是非常方便的，但三种可以说是在第二种方案的基础上，更加便利的方案。 其实上述三种方案，也是我们学习CSS时，逐步过渡的方案，不需要全部学会，只需要掌握比较常用和重要的，再借助插件，就已经足够使用了。若是还解决不了，只能求助官网或者ChatGPT了。

那我们就按照第三种的方案来，来使用Windi CSS。

在Windi CSS官网。我们可以看到工具类 ，windicss 实际上帮助我们封装了许多的class，在项目中直接使用即可，但是这么多的class，我们不能一一记住吧,首先我们要理清CSS转到Windi CSS类的过程中，CSS与Windi CSS类名之间的关系。

那下面我们就来讲述一些比较常用的CSS样式和对应的Windi CSS中的类。 这里也差不多有三种CSS与Windi CSS类名对应的命名形式：

  • 缩写命名
  • 全称驼峰式
  • 新命名驼峰

上述的三种命名方式，只是便于记忆。除了上述三种意外，还有一些直接以属性值为类名和单纯语义命名的。

缩写命名

在CSS属性中，有一些比较常见的布局尺寸和方位属性可直接使用首字母，来对应Windi CSS中的类，比如：

width      ---->            w
height      ---->            h
padding      ---->            p
margin      ---->            m
top      ---->            t
bottom      ---->            b
left      ---->            l
right      ---->            r
background      ---->       bg

比如我们原先的样式为：

width: 33%;
height: calc(100% - 20px);
padding: 10px;
margin-bottom: 10px;
background-color: #fff;

那与之对应的Windi CSS类就应该为：w-1/3 h-[calc(100%-20px)] p-10px mb-10px bg-[#fff] 这里使用了Windi CSS 自动值推导的功能。

注意：上述的方位词简写不可单独使用，例如定位相关，如需使用，则使用全称。

position: absolute;
top: 5px;
left: 10px;

那与之相对应的Windi CSS类为absolute top-50px left-10px

全称驼峰式

这种是比较常见的，Windi CSS中的类也是语义相关的，看见类名可以大致了解他代表的CSS样式。 比如我们要设置最大高度和最小高度分别为800px和300px,那我们就可以设置对应类名为：max-h-800px min-h-300px 那除了最大/最小高度外，还有哪些常用的属性是这种命名方式呢？ 这里我们总结一些比较常用的：

  • max/min-height/width => max/min-h/w
  • bg-transparent/bg-opacity-50/bg-bottom/bg-repeat
  • border-5px

新命名驼峰

这里的新命名方式指的是Windi CSS的类名与CSS值关联不大，只是语义上相通。 主要有以下几种：

  • 圆角：border-radius => rounded-10px
  • 字体大小：font-size => text-12px
  • 字体颜色：color => text-transparent
  • 行高：line-height => leading-3

属性值命名

以属性值命名的，主要是我们一看到属性值，就能想到它对应的属性，关联唯一。譬如： flex，这里我们就很容易想到对应的属性为：display。 那常用的一般都有哪些属性值对应的属性是这种命名方式呢。 一般有以下几种：

  • display => block/inline-block/flex/grid
  • position => relative/absolute/fixed/sticky

语义类

这种一般是纯语义或者属性+属性值简写：

  • hidden => display: none;
  • visible/invisible => visibility: visible;/hidden;
  • clear-both/float-left/float-right
  • overflow-hidden/overflow-x-scroll/overflow-y-hidden
  • flex-row/flex-wrap/flex-nowrap
  • justify-center/justify-start/justify-around/justify-between
  • justify-items-start/justify-items-end/justify-items-center
  • items-start/items-center/items-end（对应align-items）
  • text-left/text-center/text-right
  • indent-2em

上述的几种命名方案，只是对官网的内容再次做了分类，当然这种分类有人感觉还好，有人感觉还不如官网。但是这只是一种方法，不一定适合于任何人。建议看这篇文章前，多看几遍官网的内容，然后再看应该会比较好。当然最好的方法就是多学多用。

VS Code插件

WindiCSS IntelliSense 是一款为 Visual Studio Code 提供智能补全和提示功能的插件，专门为 Windi CSS 定制的。它可以帮助开发者更加高效地编写 Windi CSS 的类名和样式。

🌷Windi CSS🌷的入门使用，看这一篇就够了！

以下是 WindiCSS IntelliSense 插件的一些主要功能和特点：

  1. 智能补全：当您输入类名时，插件会自动显示相关的选项，并根据您的输入进行智能匹配和提示。 🌷Windi CSS🌷的入门使用，看这一篇就够了！
  2. 快速预览：插件会在您输入类名时，即时预览样式效果，让您更方便地选择适合的类。 🌷Windi CSS🌷的入门使用，看这一篇就够了！
  3. 类名提示：插件会提供完整的 Windi CSS 类名列表，并根据您的输入过滤和显示相关的类名选项。
  4. 类名文档：插件提供了类名的文档和描述，让您更容易理解和选择合适的类。
  5. 支持自定义配置：插件支持自定义配置选项，可以根据您的需求进行调整和设置。

要安装 WindiCSS IntelliSense 插件，可以在 Visual Studio Code 中进入插件商店搜索 "WindiCSS IntelliSense" 并安装即可。安装完成后，插件会自动启用，并在编写 Windi CSS 类名时提供智能辅助功能。

总的来说，WindiCSS IntelliSense 是一款非常实用的工具，可以帮助开发者更加高效地使用 Windi CSS，并加速样式编写的过程。如果你是 Windi CSS 用户，建议尝试安装并使用这个插件，以提升开发效率。

最简便的方法是先把css样式写出来，然后利用chatGPT转为Windi CSS对应的类，再结合插件看样式是否一致。毕竟ChatGPT的回答也不是百分之百正确。

优缺点

Windi CSS 是一个轻量级的、快速的 CSS 框架，它专注于提供高性能的工具和工作流程来构建现代 Web 应用程序。下面是 Windi CSS 的一些优缺点：

优点：

  1. 高性能：Windi CSS 使用 Just-In-Time 编译技术，只编译和生成实际使用的 CSS 样式，减少了冗余的 CSS 代码，提高了页面加载速度和性能。
  2. 灵活性：Windi CSS 支持类似 Tailwind CSS 的类名约定式编码，可以快速构建样式，同时也支持自定义配置和插件，使得定制化更加灵活。
  3. 响应式设计：Windi CSS 提供了丰富的响应式设计类名，可以轻松实现不同屏幕尺寸下的样式调整。
  4. 完善的文档和社区支持：Windi CSS 提供了详细的文档和示例，同时有活跃的社区支持，可以快速解决问题和获取帮助。

缺点：

  1. 学习曲线：对于新手来说，可能需要一定时间来适应 Windi CSS 的类名约定式编码和工作流程，相对于传统的 CSS 编写方式有一定的学习曲线。
  2. 生态相对较小：相比于一些流行的 CSS 框架如 Bootstrap、Tailwind CSS，Windi CSS 的生态相对较小，可能在某些功能和插件的支持上不如其他框架完善。
  3. 可维护性：由于使用类名约定式编码，样式的复用性和维护性可能会受到一定影响，需要注意避免类名的冗余和混乱。

总体来说，Windi CSS 是一个性能优秀、灵活性高的 CSS 框架，适用于构建现代 Web 应用程序。使用 Windi CSS 可以帮助开发者快速构建样式，提高开发效率和页面性能，但也需要注意适应其工作流程和避免潜在的缺点。

结语

看后WindiCSS之后，感觉用Less写css，很舒服，用WindiCSS写css感觉是比较繁琐的，这也可能是由于用的不多引起的，可能用多了，就习惯了。书读百遍其义自见。 虽然说我们使用WindiCSS时，可以联想到它对应的样式，但是远远没有CSS清晰，而且在浏览器上看对应样式，也是比较分离，不好调试。本来很简单的样式，非要这么复杂：h-310px p-10px mb-10px rounded-10px border border-solid border-gray-200,你能一眼看出它对应的样式吗？唉，只能说它的优点远大于缺点，反正程序员吗，压榨也没啥，好想哭。

转载自:https://juejin.cn/post/7378143151888252962
评论
请登录