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

Tailwind CSS / Windi CSS

相当于写原子类，但是可以按需生成 CSS，非常节省代码体积
不用再想样式类名了，解决 css 类命名问题
有很高的记忆成本，初期需要一直查字典
复杂的样式会在 HTML 上留下一长串的 className，略丑

个人选择

样式分类

模块的定制样式，只适用在这个模块内，占比大约 80%
公用样式，可以多处复用的，占比大约 10%
全局样式，指的是 html,body 这种，一般整个页面里就写一次，占比不足 1%
动态样式，依赖 JS 计算的，也占比不足 1%
覆写第三方库样式，占比大约 10%

TailWind 使用指南相关推荐

Tailwind Background
背景滚动(background attachment) CSS提供的background-attachment属性用于设置背景图像的固定方式,比如是否随着页面滚动.简单来说,background-at ...
Tailwind Spacing
单位(size) Tailwind间距单位采用rem,rem是相对于HTML的根元素<html>标签而言的,只需在根元素确定一个参考值,即可计算出不同rem的大小. html{ font- ...
Tailwind Border
边框半径(border radius) border-redius属性用于为元素设置圆角边框,可使用border-*-radius设置四个方位的圆角.圆角的设置是通过使用半径实现的,当使用一个半径时可 ...
Tailwind Input
基础输入框无边框无边框输入框主要使用了shadow阴影,适合在有底色的环境中使用. 无边框 <input type="text" class="relative ...
Tailwind Base
添加基础样式 - 使用Tailwind添加全局的基础样式全局基础样式是样式表开头的样式,用于为基础HTML元素设置有效的默认值,或应用自定义重置样式. Tailwind包括一组实用的基础样式集称为p ...
Tailwind Button
按钮组 input group 源代码查看地址 https://codepen.io/junchow/pen/dyGowYg?editors=1000 按钮组是由多个按钮水平排列而成,实现方式可分为两 ...
如何成为一名Web前端开发人员？入行学习完整指南
经过如此多的试验和测试,而不是说你从头开始创建了所有内容,接着,你在网页上创建了第一个登录表单时,你感觉如何? 经过了多次更改后,将布局分配给第一个Web应用程序时感觉如何? 当成功处理了数千个用户的 ...
如何成为一名牛逼Web前端开发人员？入行学习完整指南
经过如此多的试验和测试,而不是说你从头开始创建了所有内容,接着,你在网页上创建了第一个登录表单时,你感觉如何? 经过了多次更改后,将布局分配给第一个Web应用程序时感觉如何? 当成功处理了数千个用户的 ...
年度指南-Web网页开发学习总纲-2023修订版
年度指南-Web网页开发学习总纲-2023修订版为什么学习写代码? Web网页开发的用途 Web网页开发者类型前端开发者后端开发者全栈开发者可能需要用到的工具 HTML & CSS ...

TailWind 使用指南

CSS 的缺点

没有本地作用域

无用的 CSS 样式堆积

无法定义变量

死代码

CSS 命名困难

CSS 阻塞渲染

解决方案

CSS-in-JS

BEM

Inline styles

Tailwind CSS / Windi CSS

个人选择

样式分类

TailWind 使用指南相关推荐

最新文章

热门文章