前言
隨著項目越來越大，你是不是覺得項目的 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 之后，打開瀏覽器看到：
