前言
随着项目越来越大，你是不是觉得项目的 CSS 越来越难维护，常用的属性就是那么几个，来来回回的写，搞得你也很烦，如果是那么赶紧尝试用 ACSS 方案来解决你的问题吧，如果否，那说明你经历的项目还不够多不够大，这时候你要继续努力搬砖。
如果你不了解什么是 ACSS 的话，可以参考下我之前的教程: CSS 架构之 ACSS 。如果你想了解项目组织样式的演进历史，强烈建议你研读 TailwindCSS 作者 2017 年写的把 CSS 分为五个阶段的一篇文章：
读完你会彻底理解「为什么传统的 “语义化类名” 是 CSS 难以维护的原因」，详述了 CSS 的五个阶段，写的很棒，多看几遍。
回到 ACSS，ACSS 中目前最流行的框架就是我们文章的主角 TailwindCSS。
但是，如果在项目中使用建议你使用 Windi CSS。
https://windicss.org/
它们是一种继承关系，如何 TailwindCSS 是父类，那么 Windi CSS 就是子类。
当然你也可以认为 TailwindCSS 是 ES5，Windi CSS 是 JavaScript ，Windi CSS 在 TailwindCSS 的基础上进行了扩展，还包括 ES6+ 的部分，这个我们留在 TailwindCSS 章节讲。
不过，你可以放心学习 TailwindCSS，它的语法在 Windi CSS，完全是可用的。
搭建一个环境
Windi CSS 如何安装结合其他框架使用，在 安装 章节非常清楚。
而且我们也没必要纠结 WIndiCSS 的大家过程，这些框架都会帮我们处理的，这里我们简单的搭建一个项目，方便接下里的演示：
➜ mkdir WindiCSS-study && cd WindiCSS-study
➜ WindiCSS-study npm init -y
➜ WindiCSS-study npm install windicss -D
在 package.json 文件中的 script 字段，我们新增如下字段：
"scripts": {
"windicss:help": "windicss --help",
"windicss:init": "windicss --init . --compile",
"windicss:build": "windicss ./index.html -to windi-acss.css"
},
接下来可以运行命令：
npm run windicss:init
项目根目录将会新增三个文件：
├── index.html
├── index.windi.html
├── package.json
└── windi.css
查看 index.html 的文件内容大致如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WindiCSS-study</title>
<link rel="stylesheet" href="windi.css">
</head>
<body class="bg-gray-100">
<div class="container mx-auto flex flex-col justify-center items-center h-screen">
<div class="lg:flex shadow rounded-lg">
<div class="bg-blue-500 rounded-t-lg lg:rounded-tr-none lg:rounded-l-lg lg:w-4/12 py-4 h-full flex flex-col justify-center">
<div class="text-center tracking-wide">
<div class="text-white font-bold text-8xl lg:text-4xl">24</div>
<div class="text-white font-normal text-4xl pt-4 lg:pt-0 lg:text-2xl">Sept</div>
</div>
</div>
<div class="w-full px-1 bg-white py-5 lg:px-2 lg:py-2 tracking-wide">
<div class="flex flex-row lg:justify-start justify-center">
<div class="text-gray-700 font-light text-sm text-center lg:text-left px-2">
1:30 PM
</div>
<div class="text-gray-700 font-light text-sm text-center lg:text-left px-2">
Organiser : IHC
</div>
</div>
<div class="text-gray-700 text-xl pb-1 text-center lg:text-left px-2">
Hello WindiCSS
</div>
<div class="text-gray-800 font-light text-sm pt-1 text-center lg:text-left px-2">
A-142/1, A-142, Ganesh Nagar, Tilak Nagar, New Delhi, 110018
</div>
</div>
<div class="flex flex-row items-center w-full lg:w-1/3 bg-white lg:justify-end justify-center px-2 py-4 lg:px-0 rounded-lg">
<span class="tracking-wider text-gray-600 cursor-pointer bg-gray-100 hover:bg-gray-200 px-4 py-2 text-sm rounded-lg leading-loose mx-2">
Going
</span>
</div>
</div>
</div>
</body>
</html>
HTML 层面全部都是 ACSS 的写法，同时注意文件开头应用的样式：
<link rel="stylesheet" href="windi.css">
我们对其重新命名：windi.css => windi-acss.css。
现在我们运行命令：
# "windicss ./index.html -to windi-acss.css"
# 使用 -o 参数指定生成 css 文件的名称， -t 参数指定是否添加预检样式 (基本样式)。
npm run windicss:build
这个命令会根据 HTML 的类名生成对应的 CSS，这是项目的目录结构为：
.
├── index.html
├── index.windi.html
├── package.json
├── windi-acss.css
└── windi.css
多了个文件 windi-acss.css 其内容为：
*, ::before, ::after {
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-width: 0;
border-style: solid;
border-color: #e5e7eb;
}
* {
--tw-ring-inset: var(--tw-empty,/*!*/ /*!*/);
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgba(59, 130, 246, 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
}
:root {
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
}
:-moz-focusring {
outline: 1px dotted ButtonText;
}
:-moz-ui-invalid {
box-shadow: none;
}
::moz-focus-inner {
border-style: none;
padding: 0;
}
::-webkit-inner-spin-button, ::-webkit-outer-spin-button {
height: auto;
}
::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
[type='search'] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
abbr[title] {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
body {
margin: 0;
font-family: inherit;
line-height: inherit;
}
html {
-webkit-text-size-adjust: 100%;
font-family: ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
line-height: 1.5;
}
.container {
width: 100%;
}
@media (min-width: 640px) {
.container {
max-width: 640px;
}
}
@media (min-width: 768px) {
.container {
max-width: 768px;
}
}
@media (min-width: 1024px) {
.container {
max-width: 1024px;
}
}
@media (min-width: 1280px) {
.container {
max-width: 1280px;
}
}
@media (min-width: 1536px) {
.container {
max-width: 1536px;
}
}
.bg-gray-100 {
--tw-bg-opacity: 1;
background-color: rgba(243, 244, 246, var(--tw-bg-opacity));
}
.bg-blue-500 {
--tw-bg-opacity: 1;
background-color: rgba(59, 130, 246, var(--tw-bg-opacity));
}
.bg-white {
--tw-bg-opacity: 1;
background-color: rgba(255, 255, 255, var(--tw-bg-opacity));
}
.hover\:bg-gray-200:hover {
--tw-bg-opacity: 1;
background-color: rgba(229, 231, 235, var(--tw-bg-opacity));
}
.rounded-lg {
border-radius: 0.5rem;
}
.rounded-t-lg {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.cursor-pointer {
cursor: pointer;
}
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.flex-row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
-webkit-flex-direction: row;
flex-direction: row;
}
.flex-col {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.items-center {
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}
.justify-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
}
.font-bold {
font-weight: 700;
}
.font-normal {
font-weight: 400;
}
.font-light {
font-weight: 300;
}
.h-screen {
height: 100vh;
}
.h-full {
height: 100%;
}
.text-8xl {
font-size: 6rem;
line-height: 1;
}
.text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.text-sm {
font-size: 0.875rem;
line-height: 1.25rem;
}
.text-xl {
font-size: 1.25rem;
line-height: 1.75rem;
}
.leading-loose {
line-height: 2;
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.mx-2 {
margin-left: 0.5rem;
margin-right: 0.5rem;
}
.py-4 {
padding-top: 1rem;
padding-bottom: 1rem;
}
.px-1 {
padding-left: 0.25rem;
padding-right: 0.25rem;
}
.py-5 {
padding-top: 1.25rem;
padding-bottom: 1.25rem;
}
.px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.px-4 {
padding-left: 1rem;
padding-right: 1rem;
}
.py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.pt-4 {
padding-top: 1rem;
}
.pb-1 {
padding-bottom: 0.25rem;
}
.pt-1 {
padding-top: 0.25rem;
}
.shadow {
--tw-shadow-color: 0, 0, 0;
--tw-shadow: 0 1px 3px 0 rgba(var(--tw-shadow-color), 0.1), 0 1px 2px 0 rgba(var(--tw-shadow-color), 0.06);
-webkit-box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.text-center {
text-align: center;
}
.text-white {
--tw-text-opacity: 1;
color: rgba(255, 255, 255, var(--tw-text-opacity));
}
.text-gray-700 {
--tw-text-opacity: 1;
color: rgba(55, 65, 81, var(--tw-text-opacity));
}
.text-gray-800 {
--tw-text-opacity: 1;
color: rgba(31, 41, 55, var(--tw-text-opacity));
}
.text-gray-600 {
--tw-text-opacity: 1;
color: rgba(75, 85, 99, var(--tw-text-opacity));
}
.tracking-wide {
letter-spacing: 0.025em;
}
.tracking-wider {
letter-spacing: 0.05em;
}
.w-full {
width: 100%;
}
@media (min-width: 1024px) {
.lg\:rounded-l-lg {
border-top-left-radius: 0.5rem;
border-bottom-left-radius: 0.5rem;
}
.lg\:rounded-tr-none {
border-top-right-radius: 0px;
}
.lg\:flex {
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.lg\:justify-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
-webkit-justify-content: flex-start;
justify-content: flex-start;
}
.lg\:justify-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
-webkit-justify-content: flex-end;
justify-content: flex-end;
}
.lg\:text-4xl {
font-size: 2.25rem;
line-height: 2.5rem;
}
.lg\:text-2xl {
font-size: 1.5rem;
line-height: 2rem;
}
.lg\:px-2 {
padding-left: 0.5rem;
padding-right: 0.5rem;
}
.lg\:py-2 {
padding-top: 0.5rem;
padding-bottom: 0.5rem;
}
.lg\:px-0 {
padding-left: 0px;
padding-right: 0px;
}
.lg\:pt-0 {
padding-top: 0px;
}
.lg\:text-left {
text-align: left;
}
.lg\:w-4\/12 {
width: 33.333333%;
}
.lg\:w-1\/3 {
width: 33.333333%;
}
}
现在可以在浏览器打开 index.html 文件了，看到效果是下面这样：
hello WindiCSS
优化项目
为了更好的演示和提升开发体验，我们需要对项目进行一些调整。
首先，就是增加热更新：
"scripts": {
"windicss:help": "windicss --help",
"windicss:init": "windicss --init . --compile",
"windicss:build": "windicss ./src/index.html -mto ./src/windi-minify.css",
"windicss:watch": "windicss ./src/index.html -dto ./src/windi-acss.css"
},
windicss:watch 命令添加了 -d 参数，开启开发环境下的热更新功能。
目录调整为如下结构：
.
├── package.json
└── src
├── index.html
└── windi-acss.css
index.html 的内容替换为：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WindiCSS-study</title>
<link rel="stylesheet" href="windi-acss.css">
</head>
<body class="bg-gray-100">
<section class="flex justify-center items-center min-h-screen text-pink-600 text-5xl">Hello WindiCSS!</section>
</body>
</html>
npm run windicss:watch 之后，打开浏览器看到：
