关于css-in-js:为什么我们正在放弃-CSSinJS
这篇文章将深刻的开掘我过后为什么会在我的项目中应用 CSS-in-JS （本文应用 Emotion 计划 ），而当初为什么正在放弃这样的计划。 什么是 CSS-in-JSCSS-in-JS 容许你间接应用 JavaScript 或者 TypeScript 批改你的 React 组件的款式 import styled from '@emotion/styled'const ErrorMessageRed = styled.div` color: red; font-weight: bold;`;function App() { return ( <div> <ErrorMessageRed> hello ErrorMessageRed !! </ErrorMessageRed> </div> );}export default App;styled-components 和 Emotion 是 React 社区最风行的 CSS-in-JS 计划。本文中我只是提及到 Emotion ，然而我置信大部分的应用场景也同样实用于 styled-components。 本文专一于 运行时类型的 CSS-in-JS ，styled-components 和 Emotion 都属于这个类型。因为 CSS-in-JS 还有另一种类型，编译时类型 CSS-in-JS 这块会在文章末段略微提及到。 CSS-in-JS 的优缺点在咱们深刻理解 CSS-in-JS 的模式和它对性能的影响之前，咱们先从总体的理解一下为什么咱们会应用这项技术以及为什么要逐渐放弃 长处1.Locally-scoped styles： 当咱们在裸写 CSS 的时候，很容易就净化到其余咱们意想不到的组件。比方咱们写了一个列表，每一行的须要加一个内边距和边框的款式。咱们可能会写这样的 CSS 代码 ...