jsxstyle - CSS 命名很难

React.js 兴起后,CSS in JS 也雨后春笋般冒出来,甚至有人在 github 上建了仓库,收集各种 CSS in JS 框架。

毫不意外,我在项目开发中试过几个框架。

最初是 aphrodite,因为功能比较完善,后来可能是觉得没什么特色,换成 styled-components,直到最近,又把 styled-components 换成 jsxstyle

简单做个分类,CSS in JS 可以分成两个类别。

一类还写我们熟悉的 CSS 语法,比如 styled-components:

import React from 'react'
import styled from 'styled-components'
const Header = styled.header`
  color: #333;
  font-size: 3rem;
`
export default () => <Header>this is heading</Header>

另一类则不再写 CSS 语法,而要把 font-size 写成 fontSize,比如 jsxstyle:

import React from 'react'
import { Block } from 'jsxstyle'
export default () => <Block component='header' color='#333' fontSize='3rem'>this is heading</Block>

那么,我放弃 styled-components,选择 jsxstyle,是否意味着我偏好 CSS 语法?

并不然,我没有偏好哪一种。在技术选型上,我是个实用主义者。

我最终选择 jsxstyle 的原因,是因为 CSS 命名很难 - 当然,命名一直很难,不是 CSS 独有。

在 styled-components 下,每一组样式,哪样只用一次,你也得命名一次,比如这样:

import React from 'react'
import styled from 'styled-components'
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;
export default () => <Title>this is title</Title>

jsxstyle 则根据 CSS 的 display 值定义了一些常见组件,比如 Block 组件对应 display: block,因此上面的 Title 我们可以这样写:

import React from 'react'
import { Block } from 'jsxstyle'
export default () => <Block component='h1' fontSize='1.5em' textAlign='center' color='palevioletred'>this is title</Block>

你看,在 jsxstyle 里,我不用特地浪费一个 Title 名称。命名很难,你用掉 Title 以后,接着你就要写 ArticleTile,用掉 ArticleTitle 以后,接着你就要绞尽脑汁,最后想出 ArticleMetaTitle - 在 jsxstyle 下,这可以省掉。

当然,这并不是说 jsxstyle 可以完全避免命名难题,像复用组件时,我们不可避免还是要命名。但至少,不复用的组件里,我们不再需要命名。