当前位置：首页 > article >正文

【揭秘】CSS in JS：用JS对象定义样式，告别类名冲突(4)

article 2024/11/19 20:56:33

CSS-in-JS 是一种将 CSS 样式以 JavaScript 对象的形式来描述的方法。这种方法的核心思想是用 JavaScript 对象来描述样式，而不是传统的 CSS 样式表。CSS-in-JS 在现代前端开发中越来越流行，特别是在使用 React 和 Vue 等现代框架时。

1. 基本概念

1.1 描述样式

用一个 JavaScript 对象来描述样式，例如：

const styles = {
  backgroundColor: '#f40',
  color: '#fff',
  width: '400px',
  height: '500px',
  margin: '0 auto'
};

1.2 应用样式

如何将样式应用到界面上，不是 CSS-in-JS 关心的事情。你可以用任何技术、任何框架、任何方式将它应用到界面。例如，在 React 中，可以这样做：

import React from 'react';

const styles = {
  backgroundColor: '#f40',
  color: '#fff',
  width: '400px',
  height: '500px',
  margin: '0 auto'
};

function App() {
  return (
    <div style={styles}>
      Hello, World!
    </div>
  );
}

export default App;

2. 特点

2.1 绝无冲突的可能

由于 CSS-in-JS 根本不存在类名，所以绝不可能出现类名冲突。每个样式对象都是独立的，不会与其他样式对象产生冲突。

2.2 更加灵活

可以充分利用 JavaScript 语言的灵活性，用各种方式来处理样式。例如：

动态样式：根据状态动态生成样式。
公共样式：可以将公共样式提取到公共模块中返回。
条件样式：根据条件应用不同的样式。

import React from 'react';

const commonStyles = {
  margin: '0 auto',
  padding: '10px'
};

function App({ isRed }) {
  const styles = {
    ...commonStyles,
    backgroundColor: isRed ? '#f40' : '#0f0',
    color: '#fff',
    width: '400px',
    height: '500px'
  };

  return (
    <div style={styles}>
      Hello, World!
    </div>
  );
}

export default App;

2.3 应用面更广

只要支持 JavaScript 语言，就可以支持 CSS-in-JS。因此，在一些用 JavaScript 语言开发移动端应用的时候非常好用，因为移动端应用可能并不支持 CSS。例如，在 React Native 中，CSS-in-JS 是标准的样式处理方式。

2.4 书写不便

书写样式，特别是公共样式的时候，处理起来不是很方便。CSS-in-JS 的样式对象通常比传统的 CSS 代码更冗长，尤其是在处理复杂样式时。

2.5 在页面中增加了大量冗余内容

在页面中处理 CSS-in-JS 时，往往是将样式加入到元素的 style 属性中，会大量增加元素的内联样式，并且可能会有大量重复，不易阅读最终的页面代码。

3. 常见的 CSS-in-JS 库

3.1 styled-components

styled-components 是一个非常流行的 CSS-in-JS 库，它允许你用模板字符串来编写样式，并将其与组件关联起来。

import React from 'react';
import styled from 'styled-components';

const Div = styled.div`
  background-color: #f40;
  color: #fff;
  width: 400px;
  height: 500px;
  margin: 0 auto;
`;

function App() {
  return (
    <Div>
      Hello, World!
    </Div>
  );
}

export default App;

3.2 emotion

emotion 是另一个流行的 CSS-in-JS 库，它提供了类似于 styled-components 的功能，但更加轻量。

import React from 'react';
import { css, jsx } from '@emotion/react';

const styles = css`
  background-color: #f40;
  color: #fff;
  width: 400px;
  height: 500px;
  margin: 0 auto;
`;

function App() {
  return (
    <div css={styles}>
      Hello, World!
    </div>
  );
}

export default App;