前端工程化：CSS-in-JS 的思考

随着前端技术的不断进步，开发模式也在不断的演进。CSS-in-JS作为一种新兴的技术趋势，在近年来收到了广泛的关注。本文将从优势、劣势、用途几个角度来探讨CSS-in-JS。

什么是 CSS-in-JS?

简单来说，CSS-in-JS 允许开发者直接将JavaScript文件中编写样式代码，而不是传统的.css或.less等单独的样式文件。这样做的目的是为了更好的实现组件级别的封装，并提高样式的复用性和可维护性。

这里以一个简单的React组件为例展示如何使用styled-components（一种流行的CSS-in-JS库）：

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

const Button = styled.button`
  background: ${props => (props.primary ? 'palevioletred' : 'white')};
  color: ${props => (props.primary ? 'white' : 'palevioletred')};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

const App = () => {
  return (
    <>
      <Button>Normal</Button>

      <Button primary>Primary</Button>
    </>
  );
};

export default App;

优势

Scoped CSS：目前市场上 CSS-in-JS 的库基于 CSS modeules 实现了 class names 的唯一性，不用担心碰撞问题，以后也不需要担心。

SSR：SSR 的收益不用多描述，快速渲染、搜索引擎等，然而 SSR 页面需要样式也被初始化，碰巧的是， CSS-in-JS 库都支持 SSR。

劣势

人无完人，CSS-in-JS 也是一样，虽然带来了一系列的益处，但也避免不了要付出一些代价，正如代码，当遇到复杂布局时，可能会发现很难快速定位到具体的样式规则。由于样式写在了 js 里面，相比于 less/sass，灵活性会丢失。

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

const Container = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background: #f0f0f0;
`;

const Title = styled.h1`
  font-size: 2em;
  color: #333;
  margin-bottom: 20px;
`;

const Subtitle = styled.h2`
  font-size: 1.5em;
  color: #666;
`;

function App() {
  return (
    <Container>
      <Title>Welcome to My App</Title>
      <Subtitle>This is a subtitle</Subtitle>
    </Container>
  );
}

export default App;

用途

1. React 应用，在 React 应用中，CSS-in-JS 能很好地配合组件化开发。

2. 动态样式需求，对于需要根据状态动态更新样式的应用，CSS-in-JS 是理想选择。