• 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>

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
    • 所以我们一般把用户需要在首屏看到的（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

          
      

      • 1
    • 通过规范来规避类名冲突
    • 样式都在一个层级，不用担心优先级的问题了，可以简化层叠规则
    • 但是不是强约束，还是要想名字，更累了
      (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

      • 1
      • 2
      • 3
      • 4
      • 5
      • 6
      • 7
      • 8
      • 9
      • 10
      • 11
      • 12
      • 13
      • 14
      • 15
      • 16
      • 17
      • 18
      • 19
      • 20
      • 21
      • 22
      • 23
      • 24
      • 25
      • 26
      • 27
      • 28
      • 29
      • 30
      • 31
      • 32
      • 33
      • 34
      • 35
      • 36
      • 37
      • 38
      • 39
      • 40
      • 41
      • 42
      • 43
      • 44
      • 45
      • 46
      • 47
      • 48
      • 49
      • 50
      • 51
      • 52
      • 53
      • 54
      • 55
      • 56
      • 57
      • 58
      • 59
      • 60
      • 61
      • 62
      • 63
      • 64
      • 65
      • 66
      • 67
      • 68
      • 69
      • 70
      • 71
      • 72
      • 73
      • 74
      • 75
      • 76
      • 77
      • 78
      • 79
      • 80
      • 81
      • 82
      • 83
      • 84
      • 85
      • 86
      • 87
      • 88
      • 89
      • 90
      • 91
      • 92
      • 93
      • 94
      • 95
      • 96
      • 97
      • 98
      • 99
      • 100
      • 101
      • 102
      • 103
    Inline styles
    • 可以直接从 JS 传值到 style，有编程能力
    • 但是全都这样写就太累了，一般作为补充手段
    • 驼峰属性毕竟不是正路 CSS 写法
    • 无法解决部分问题，如覆盖已有样式、伪类、动画等
    Tailwind CSS / Windi CSS
    • 相当于写原子类，但是可以按需生成 CSS，非常节省代码体积
    • 不用再想样式类名了，解决 css 类命名问题
    • 有很高的记忆成本，初期需要一直查字典
    • 复杂的样式会在 HTML 上留下一长串的 className，略丑

    个人选择

    样式分类
    • 模块的定制样式，只适用在这个模块内，占比大约 80%
    • 公用样式，可以多处复用的，占比大约 10%
    • 全局样式，指的是 html,body 这种，一般整个页面里就写一次，占比不足 1%
    • 动态样式，依赖 JS 计算的，也占比不足 1%
    • 覆写第三方库样式，占比大约 10%
  • 相关阅读:
    技术分享 | App常见bug解析
    amd模块化——typeScript下载于安装以及运行 ——yarn下载——TS的运行——Ts数据类型描述
    二叉树基础知识总结
    拖放事件，dataTransfer，getBoundingClientRect
    如何实现车机体验”遥遥领先”？头部玩家已经给出答案
    如何使用 C++ 构建一个环结构？
    liunx下定时备份mysql数据
    ccf序列查询新解python满分_纯数学规律（学霸怎么想到的啊......）
    GPT 学习法：恐怖算力 + 精确算法，实现复杂文献轻松的完美理解、在庞大的不确性中找到确定性
    【Redis】Redis作为缓存
  • 原文地址：https://blog.csdn.net/AnitaSun/article/details/126609476