不要再在JavaScript中写 CSS了

本文作者是 react-css-modules 和 babel-plugin-react-css-modules 的作者。并不是对 CSS in JavaScript: The future of component-based styling，或是使悠揭捉?式组件的否决，而是一种弥补，web 开辟者要懂得本身的需求，眉僮霸己应用 styled-components 的┞锋正原因。

9 个谎话

CSS 不该随便放置。很多项目选择将样式写在 JavaScript 中的来由纰谬。本文列出了常见的误会，以及解决问题的现存 CSS 筹划。

本文的任何谈吐都没有对某个项目或人进行人身进击的意思。styled-components 是 React 的今朝趋势，所以我将 styled-components 定义为“JavaScript 中的 CSS”。

styled-components 的提议人(Max Stoiber、Glen Maddern 以及所有的供献者)都很聪慧、设法主意独特，出发点也是好的。

为了完全透明，我还要指出我是 react-css-modules 和 babel-plugin-react-css-modules 的作者。

这在 React 中很有效。毕竟组件行动就是由属性控制的。给属性值直接绑定样式有意义吗?可能吧。然则来看看组件的实现代码：

小红帽

CSS 和 JavaScript 汗青

层叠样式表(CSS)是为描述标记说话文档的┞饭现样式而出现的。JavaScript 是为了组合图片、插件等组件而创造的一种“胶水说话”。跟着成长，JavaScript 拓展、改变，有了新的应用处景。

Ajax 的出现(2005)是一个重要的里程碑。这时 Prototype、jQuery、MooTools 等库已经吸引了大年夜量的拥戴者，合营解决后台跨浏览器数据获取问题。这又激发了新的问题：若何治理数据?

那么 CSS 呢?

借用 styled-components 文档中的话：

纯 CSS 的问题在于它产生的那个时代，网站由文档构成。1993 年，网站产生，重要用于交换科学文献，CSS 是设计文献样式的解决筹划。然则如今我们构建的是丰富的、面向用户的交淮竽暌功用，而 CSS 并不是为此而生的。

我不这么认为。

CSS 已经成长到可以知足现代 UI 的需求了。以前十年中出现的新特点数不堪数(pseudo-classes、pseudo-elements、CSS variables、media queries、keyframes、combinators、columns、flex、grid、computed values 等等)。

到了 2010 年，Backbone.js 出现，成为了应用状况治理的行业标准。不久后，Knockout 和 Angular 双向绑定的特点吸引了所有人。之后，React 和 Flux 出现，开启了单页应用(SPA)的新纪元，组件构造应用。

大年夜 UI 的角度看，“组件”是文档一一个自力的片段(<button /> 就是个组件)。CSS 被设计用来样式化文档，包含所有组件。问题在哪?

styled-components 可以用标记模板字面量在 JavaScript 中写 CSS。如许就省去了组件和样式间的匹配 ——组件由细粒度的样式构造构成，比如：

import React from 'react'; 
 
import styled from 'styled-components'; 
 
// Create a <Title> react component that renders an <h1> which is 
 
// centered, palevioletred and sized at 1.5em 
 
const Title = styled.h1` 
 
  font-size: 1.5em; 
 
  text-align: center; 
 
  color: palevioletred; 
 
`; 
 
// Create a <Wrapper> react component that renders a <section> with 
 
// some padding and a papayawhip background 
 
const Wrapper = styled.section` 
 
  padding: 4em; 
 
  background: papayawhip; 	
			 1/5    1 2 3 4 5 下一页 尾页	
			

　　推荐阅读
　　政务区块链 vs 传统电子政务信息系统
            
            什么是电子政务电子政务是指当局经由过程信息通信技巧手段的密集性和计谋性应用组织公共治理的方法，旨在进步效力、加强当局的透明度、改良财务束缚、改进公共政策的质量和决定计划的科学>>>详细阅读


本文标题：不要再在JavaScript中写 CSS了
地址：http://www.17bianji.com/lsqh/36001.html
 1/2    1