带你了解CSS in JS

React的出现，打破了”关注点分离”网页开发原则。因其采用组件结构，便强制要求把 HTML、CSS、JavaScript 写在一起（可见下面案例）。更准确地说，是用JavaScript写HTML和CSS。

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

const clickHandler = () => alert('hi'); 

ReactDOM.render(
  <h1 style={style} onclick={clickHandler}>
     Hello, world!
  </h1>,
  document.getElementById('example')
);

React 在 JavaScript 里面实现了对 HTML 和 CSS 的封装，对 HTML 的封装是 JSX 语言 。而由于CSS的封装非常弱，导致了一系列的第三方库，用来加强 React 的 CSS 操作，它们统称为 CSS in JS。

本文将通过一个新的 CSS in JS 库polished.js来充分展示使用 JavaScript 语言写 CSS 的优势。

阅读全文：CSS in JS 简介

了解更多前沿技术资讯，获取深度技术文章推荐，请关注CSDN研发频道微博。