TailWind 使用指南
华善
CSS 的缺点
没有本地作用域
- CSS 没有本地作用域，所有声明的样式都是全局的。SPA 应用流行之后这个问题更加突出了，会增加样式冲突的概率。
- 由于 CSS 没有本地作用域，所以很难为选择器起名字，如果你起了一个名为
.title的样式名，这是一个很常见的类名，所以很容易跟页面上其它选择器发生冲突，所以你不得不手动为这个类名添加一些前缀，例如.home-page-title来避免这个问题。
无用的 CSS 样式堆积
- 在开发新的功能或者进行代码重构的时候，由于HTML代码和CSS样式之间没有显式的一一对应关系，我们很难辨认出项目中哪些CSS样式代码是有用的哪些是无用的，这就导致了我们不敢轻易删除代码中可能是无用的样式。这样随着时间的推移，项目中的CSS样式只会增加而不会减少。
- 所以项目变得越来越重量级，加载到浏览器的CSS样式会越来越多，会造成一定的性能影响。
- 难以复用
无法定义变量
- 一些很常用的属性值无法将其赋值给变量，然后进行调用变量来进行使用。
死代码
- 一些交互复杂的页面，页面的样式通常要根据组件的状态变化而发生变化。如果不使用CSS-in-JS，处理这些逻辑复杂的情况会比较麻烦。
CSS 命名困难
- 越来越多的相似语义化场景，会导致越来越多类似 aa-title、bb-title、bb-b1-title、aa-content、bb-content 这样的 class 命名。开发人员一边需要保证 aa、bb、bb-b1 这样的名称能准确表达语义，一边需要小心翼翼地避免 css 全局作用域带来的冲突问题
CSS 阻塞渲染
- 浏览器在将我们的页面呈现给用户之前一定要先完成页面引用到的CSS文件的下载和解析（download and parse），所以link标签链接的CSS资源是渲染阻塞的（render-blocking）。如果CSS文件非常大或者网络的状况很差，渲染阻塞的CSS会严重影响用户体验。针对这个问题，社区有一种优化方案就是将一些重要的CSS代码（Critical CSS）直接放在头部的style标签内，其余的CSS代码再进行异步加载，这样浏览器在解析完HTML后就可以直接渲染页面了。具体做法类似于以下代码：
<html> <head> <style> /* critical CSS */ </style> <script>asyncLoadCSS("non-critical.css")</script> </head> <body> ...body goes here </body> </html> - 所以我们一般把用户需要在首屏看到的（above the fold）页面要用到的最少CSS提取为Critical CSS
解决方案
CSS-in-JS
- CSS-in-JS就是将应用的CSS样式写在JavaScript文件里面，而不是独立为一些.css，.scss或者less之类的文件
- 具体介绍可以查看这篇文章
- 不用再想样式类名了，有 JSX 组件名就行
- 同样是会生成全局唯一类名，不用担心冲突
- 不用 CSS, JSX 之间跳来跳去，一个文件搞定
- 市面上方案太多了，万一选择的方案被淘汰，就会带来维护风险
- 原本一句简单 HTML 的事情，为了样式非要变成组件，感觉是过度抽象
- 适合做组件库时使用，直接交付一个 JS 就完事了，样式都是从 JS 释放出来的
- 不太适合做普通应用，样式都由 JS 动态释放，CSS 没法抽出来就没法利用浏览器缓存
BEM
- 模块名 + 元素名 + 修饰器名
- 例：
分页组件：/app/components/page-btn/
所以模块名为page-btn<div class="page-btn"> <button type="button" class="page-?>btn__prev">上一页</button> <!-- ... --> <button type="button" class="page-btn__next">下一页</button> </div> - 通过规范来规避类名冲突
- 样式都在一个层级，不用担心优先级的问题了，可以简化层叠规则
- 但是不是强约束，还是要想名字，更累了
(1)页面结构 - 容器: container - 页头：header - 内容：content/container - 页面主体：main - 页尾：footer - 导航：nav - 侧栏：sidebar - 栏目：column - 页面外围控制整体布局宽度：wrapper - 左右中：left right center (2)导航 - 导航：nav - 主导航：mainbav - 子导航：subnav - 顶导航：topnav - 边导航：sidebar - 左导航：leftsidebar - 右导航：rightsidebar - 菜单：menu - 子菜单：submenu - 标题: title - 摘要: summary (3)功能 - 标志：logo - 广告：banner - 登陆：login - 登录条：loginbar - 注册：regsiter - 搜索：search - 功能区：shop - 标题：title - 加入：joinus - 状态：status - 按钮：btn - 滚动：scroll - 标签页：tab - 文章列表：list - 提示信息：msg - 当前的: current - 小技巧：tips - 图标: icon - 注释：note - 指南：guild - 服务：service - 热点：hot - 新闻：news - 下载：download - 投票：vote - 合作伙伴：partner - 友情链接：link - 版权：copyright
Inline styles
- 可以直接从 JS 传值到 style，有编程能力
- 但是全都这样写就太累了，一般作为补充手段
- 驼峰属性毕竟不是正路 CSS 写法
- 无法解决部分问题，如覆盖已有样式、伪类、动画等
Tailwind CSS / Windi CSS
- 相当于写原子类，但是可以按需生成 CSS，非常节省代码体积
- 不用再想样式类名了，解决 css 类命名问题
- 有很高的记忆成本，初期需要一直查字典
- 复杂的样式会在 HTML 上留下一长串的 className，略丑
个人选择
样式分类
- 模块的定制样式，只适用在这个模块内，占比大约 80%
- 公用样式，可以多处复用的，占比大约 10%
- 全局样式，指的是 html,body 这种，一般整个页面里就写一次，占比不足 1%
- 动态样式，依赖 JS 计算的，也占比不足 1%
- 覆写第三方库样式，占比大约 10%
类似资料：