Day 10 JavaScript CSS in JS

Why CSS in JS?

以前在网页开发的时候有一个原则叫做关注点分离(Separation of Concerns)。
意思是各种技术只负责他们自己的领域，不要混用，以网页开发来说就是将 HTML、CSS、JS 分离，不要写 inline-style 跟 inline script。
跟在写 Rails 时用到的 MVC 架构蛮像的，将功能区分，把各功能放在该放的位置。

不过 React 出现後，这个原则就被打破了，因为 React 是组件结构，强制把 HTML、CSS、JS 写在一起。
而根据css-in-js libraries，目前有超过 50 种 CSS in JS 的函式库可以使用，其中 styled-components 算是比较有名的，在 GitHub 上有将近 35K 的星星数。

以下是 styled-components 在 GitHub 提供的范例：

import React from 'react';

import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

上面例子把 HTML 跟 CSS 都用 const 包成一个常数，使用时只要将他包在<>里就可以直接吃到里面的 HTML 跟 CSS，相当方便。

优点

• 组件化方便重复使用
• 不用担心改了其中一个 CSS 样式造成其他地方跑版
• 因为 HTML 跟 CSS 都是动态生成的，所以可以接到 component 的 props 值来动态改变 CSS 样式
• 维护时不需要再去找到底被哪个 CSS 影响

缺点

• 门槛较高：需要学习新的语法
• 可读性较低
• 目前各个函式库没有统一的标准

参考：
[1]Separation of Concerns (SoC)
[2]CSS in JS (react.js)
[3]CSS in JS 简介
[4]CSS-in-JS简介：示例，优点和缺点
[5]【Day 12】Styled-component