5.JS学习篇-CSS in JS

1. 基本概念

“CSS in JS” 是一种将 CSS 样式写在 JavaScript 文件中的技术方案。它旨在解决传统 CSS 面临的一些问题，如全局命名冲突、缺乏动态性和难以维护等。

2. 主要优势

1. 组件化样式

        1. 可以将样式与组件紧密结合，实现每个组件拥有自己独立的样式，避免全局样式的冲突。

        2. 例如，使用 React 的 styled-components 库，可以为每个 React 组件定义特定的样式。

2. 动态样式

        1. 可以通过 JavaScript 变量和逻辑来动态生成样式，实现更灵活的界面效果。

        2. 比如根据不同的状态或用户交互改变组件的样式。

3. 更好的维护性

        1. 样式与组件的代码放在一起，便于理解和修改。开发人员不需要在多个文件中切换来查找和维护样式。

4. 命名安全

        1. 避免了传统 CSS 中复杂的命名规则和可能的命名冲突。

3. 常见的库和使用方式

1. styled-components: 是一个流行的 “CSS in JS” 库，它允许使用标签模板字面量来定义样式化的组件

import styled from 'styled-components';


const Button = styled.button`

background-color: blue;

color: white;

`;

2. Emotion: 另一个强大的 “CSS in JS” 库，提供了灵活的样式定义和动态样式的功能。

3. 与传统的CSS相比较

        1. 组织方式：传统 CSS 通常是独立的文件，而 “CSS in JS” 将样式与 JavaScript 代码整合在一起。

        2. 作用域：“CSS in JS” 通过组件的封装实现了局部作用域的样式，而传统 CSS 可能存在全局作用域的问题。

        3. 动态性：“CSS in JS” 更容易实现动态样式，而传统 CSS 可能需要借助预处理器或复杂的 JavaScript 操作。