谈谈我理解的CSS in JS。

背景

之前和现在写的项目里面，有一个概念，关注点分离，也面向对象的程序设计的核心概念。关注点分离（Separation of concerns，SOC）是对只与“特定概念、目标”（关注点）相关联的软件组成部分进行“标识、封装和操纵”的能力，即标识、封装和操纵关注点的能力。是处理复杂性的一个原则。由于关注点混杂在一起会导致复杂性大大增加，所以能够把不同的关注点分离开来，分别处理就是处理复杂性的一个原则，一种方法。

所以关注点分离概念在前端开发的领域，就是把html、css、JavaScript分开成三大独立部分，各自解耦，降低复杂度，也更好的维护。

简单说，就是不要写“行内样式”和“行内脚本”。

React和模块化概念的出现

React和jsx的出现，改变了独立三个部分的局面，html写到js里面成为了jsx，页面也被切分成一个个模块，这时候对css来说，独立打包似乎并不是那么的理所当然了，似乎一个模块有它自己的html、js、css才是更好的切分页面功能的方式。

CSS in JS

React其实也不是不写html了，只是用JavaScript来写html，所以css是不是也能用JavaScript来写？

答案是肯定的。而且还有很多库，包装了非常多的便利的方法。这里举个最近在看的库为例子：Polished。

Polished

Installation

$ npm install --save polished

Usage

import { lighten, modularScale } from 'polished'

Example

取一个方法做一个实例：

clearFix

// Styles as object usage
const styles = {
   ...clearFix(),
}

// styled-components usage
const div = styled.div`
  ${clearFix()}
`

// CSS as JS Output

'&::after': {
  'clear': 'both',
  'content': '""',
  'display': 'table'
}

ellipsis

// Styles as object usage
const styles = {
  ...ellipsis('250px')
}

// styled-components usage
const div = styled.div`
  ${ellipsis('250px')}
`

// CSS as JS Output

div: {
  'display': 'inline-block',
  'maxWidth': '250px',
  'overflow': 'hidden',
  'textOverflow': 'ellipsis',
  'whiteSpace': 'nowrap',
  'wordWrap': 'normal'
}

方法有很多，罗列如下就是：

Mixins

clearFix
ellipsis
fontFace
hiDPI
hideText
hideVisually
normalize
placeholder
radialGradient
retinaImage
selection
timingFunctions
triangle
wordWrap

Color

adjustHue
complement
darken
desaturate
getLuminance
grayscale
hsl
hsla
invert
lighten
mix
opacify
parseToHsl
parseToRgb
readableColor
rgb
rgba
saturate
setHue
setLightness
setSaturation
shade
tint
transparentize

Shorthands

animation
backgroundImages
backgrounds
borderColor
borderRadius
borderStyle
borderWidth
buttons
margin
padding
position
size
textInputs
transitions

Helpers

directionalProperty
em
modularScale
rem
stripUnit

Types

AnimationProperty
FontFaceConfiguration
HslColor
HslaColor
InteractionState
PointingDirection
RadialGradientConfiguration
Ratio
RgbaColor
RgbColor
TimingFunction
toColorString
ModularScaleRatio

方法足够多，从名称上来看也知道是干嘛的了。使用起来也很方便。尝试一下，也许会带来不一样的思维模式。

写在最后

CSS in JS都有了，那CSS预处理语言SASS/LESS该怎么办？萝卜白菜各有所爱，也不是说谁一定会取代谁，适合自己的才是最好的。

前端，在造轮子的路上，越走越远。