css

css

问题

• 书写繁琐（不支持嵌套）、
• 样式易冲突（没有作用域概念）、
• 缺少变量（不便于一键换主题）等不一而足

需要的能力：

• 作用域
• 模块
• 使用 js 变量

技巧

不要同时写 margin top 和 margion-bottom，移除后，后面的间隔就没有了

CSS Modules

 CSS 文件的管理方式，在构建过程中对 CSS 类名进行唯一的转换

• 动态计算, 类名变化,外部想灵活覆盖样式增加了困难
• 局部作用域: 默认情况下，所有的样式都是局部作用域的，这可以避免全局样式冲突。
• 模块化: 样式可以和组件代码一起模块化管理，这使得组件更加独立和可重用。
• 可组合性: 可以很容易地组合多个类名，以构建更复杂的样式逻辑。
• 清晰的依赖关系: 由于样式是作为模块导入的，这使得跟踪组件和它们的样式依赖更加明确。

css in js

是什么

CSS-in-JS 是一种模式，它允许开发者将 CSS 样式直接写入 JavaScript 文件中。这种方式通常是通过使用 JavaScript 对象或模板字符串来定义样式

Styled-components、Emotion

解决了以下几个问题

1. 局部作用域
2. 依赖管理: 在传统的 CSS 开发中，管理样式与组件之间的依赖关系往往比较困难。CSS-in-JS 允许将样式直接与组件代码捆绑在一起，这使得追踪和管理依赖关系变得简单。
3. 动态样式: 允许根据组件的 props、state 或 context 来动态计算和应用样式。
4. 主题化和样式共享: CSS-in-JS 可以很容易地实现样式的主题化和共享。你可以定义一个主题对象，并在整个应用程序的不同组件中引用它，使得改变主题或调整样式变得容易。
5. 工具链整合: 由于样式是通过 JavaScript 编写的，因此可以利用现有的 JavaScript 工具链，比如代码压缩、打包、代码拆分、热模块替换（HMR）等。
6. 性能优化: CSS-in-JS 可以帮助减少最终的样式文件大小，从而提升性能。
7. 服务端渲染: CSS-in-JS 库通常支持服务端渲染

问题

1. 性能问题：在运行时创建和插入样式，这可能会导致性能损失，尤其是在大型应用程序中。JavaScript 需要解析和将样式应用到 DOM 元素上，这一过程可能比传统的 CSS 加载和应用更慢。
2. 一般来说，没啥性能问题
3. 加载时间：对于大型应用来说，所有的 CSS 资源都放在 JS 代码中可能导致文件过大，从而导致加载时间增加。虽然有一些解决办法可以异步加载或者按需加载，但并不能完全消除问题。
4. js 文件变大，但 css 文件变小了
5. SEO 问题：一些搜索引擎可能不能很好地识别和处理 JavaScript 中内嵌的 CSS，这可能会影响到网站的 SEO 效果。
6. 违反分离原则：CSS-in-JS 可能违反了关注点分离原则（Separation of Concerns）。此原则建议将 HTML、CSS 和 JavaScript 隔离，各自负责各自的职责：结构、样式和行为。然而有人认为这并不是真正的问题，因为他们认为一切都是组件，CSS 只是组件的一部分而已。
7. 服务器端渲染 (SSR) 的复杂性: 在服务器端渲染的应用中，CSS-in-JS 需要额外的配置来确保样式可以被正确生成和嵌入到服务端渲染的 HTML 中。
8. Devtool 变得难看
9. 可以过滤
10. 类名是随机的

组件级别的 CSS-in-JS