css in js - archering/basic GitHub Wiki

http://www.ruanyifeng.com/blog/2017/04/css_in_js.html

网页开发有一个原则，叫做"关注点分离"（separation of concerns）

意思是，各种技术只负责自己的领域，不要混合在一起，形成耦合。对于网页开发来说，主要是三种技术分离

阿

  1. HTML 语言：负责网页的结构，又称语义层
  2. CSS 语言：负责网页的样式，又称视觉层
  3. JavaScript 语言：负责网页的逻辑和交互，又称逻辑层或交互层

简单说，就是一句话，不要写"行内样式"（inline style）和"行内脚本"（inline script）

React 出现以后，这个原则不再适用了。因为，React 是组件结构，强制要求把 HTML、CSS、JavaScript 写在一起，有利于组件的隔离

react 用js写html的技术叫 jSX

React 对 CSS 封装非常简单，就是沿用了 DOM 的 style 属性对象

const style = {
  'color': 'red',
  'fontSize': '46px'
};

那么 有没有更好的办法，js写css。 可以 就是本文说道的 css in js。

CSS in JS 的库至少有47种, 推荐大家用polished.js

"CSS 预处理器"（比如 Less 和 Sass 和 css in js 不是一回事。

postCSS 是一个另类，你可以把他归位preprocessor 但是他和less 或者 sass处理的东西又不一样。 less或者sass 是一门新语言， 需要被编译生成css字符串，然后又被css 解析器解析，让浏览器识别并应用到你的应用上。 postcss 是一个javascript编写的工具，这个工具接手css作为输入源，然后通过插件 把他转换成你需要的css输出。