Hi，这里是正在参加青训营🪖的JustHappy，入坑前端也有一年了，感谢青训营给我这个机会让我回到原点，也是感慨万千啊，So！来看看我这个三流前端目前对基础三件套的理解吧！！！记录一些除了最最基础部分之外要知晓的玩意，不是很全（也许后期会补充），这篇主要是CSS相关笔记
那些样式作用的优先级 👮
影响样式作用优先级的主要有三点，一是CSS的书写相关，二是选择器相关，三是权重相关，我觉得具体的都可以参照MDN文档 点这里查看
CSS书写
- CSS是顺序执行的，故写在后面的样式会覆盖写在前面的
- CSS书写位置：行内样式>内嵌样式>引用样式
- 关键字：使用 !important 关键字优先级最高
选择器的优先级
ID 选择器>类选择器>标签选择器>通用选择器
权重
行内样式（1000）>ID选择器（100）>类选择器（10）>标签选择器（1）>通用选择器（0）
权重在一些情况下是可以叠加的，权值越大，优先级越高
#box p .tt{
...
}
/* 权重 = 100 + 1 + 10 = 111*/
回流？重绘？🎨
回流 (Reflow) 是指网页渲染引擎根据元素的尺寸、位置和显示属性来重新计算页面的排版和布局，是网页渲染过程中的一个重要步骤。重绘 (Repaint) 是指网页渲染引擎根据显示属性 (如颜色、文字大小等) 重新绘制页面元素，不影响元素的位置和尺寸。
有些操作会触发这些特性，影响页面加载性能...(篇幅所限，打个TODO😂 我，我有机会一定写一篇复习复习)
CSS预处理器 （Sass 、 Less）
印象中初上手CSS预处理器是十分舒爽的，最直观Sass和Less都支持"有一定逻辑性的"CSS编码，CSS预处理器使得CSS不在只是一个死的“样式表”，我把官网链接放下面啦！！！
点我去 Sass Sass功能更加强大些，完全上手需要更多时间
点我去Less 就像官网的Slogan：“It's CSS，with just a little more.”Less上手是非常快的，可能20分钟？10分钟？😂
前端靓仔必须要了解的 原子化CSS 🏗️
原子化CSS（Atomic CSS）用大白话来说就是将常用的样式封装成类，只要编辑HTML标签的class属性就可以实现样式的挂载。以下是几个流行的原子化CSS引擎
说到原子化CSS就一定要说tailwindCSS，这应该是第一个被大规模应用的原子化CSS 项目，官网链接我放在这了 点我去
上面的tailwindCSS是默认预设好了样式和调用规则，如果你想要自由度更高，并且优化更高的原子化CSS体验，不妨可以试试UnoCSS，这个CSS引擎允许你自定义rules，在样式复用时候确实很强。官网链接我也放这了 点我去
Windi CSS 我并没有使用过，但是官网说已经停用了，故这边放一个链接 点我去官网
还是很菜的前端，如有不足和错误，欢迎评论区或者私信指正啊
