未来的前端开发应该是将页面样式和逻辑统一放在 JavaScript 中的。

CSS

现在的 CSS 存在以下的问题：

优先级混乱

先声明的样式可能被覆盖也可能不被覆盖。

对于一个大项目来说，同时引入的 CSS 会有很多，然而不同的开发者并不知道别人是如何声明样式的。

所以我经常在写 CSS 的时候忧心慌慌，生怕动到了别人的样式。

当然我们可以在写 CSS 的时候用不同的 class 名称，然后指定每一层的路径来让我们写的样式只对我们的元素生效。

我们还可以用 CSS Modules 来解决这个问题，生成唯一的名称来避免冲突。

但是这样做成本太高。

无法快速定位出最终生效的样式

有些样式是全局声明的，会对所有元素生效，所以最后写出来的页面上的样式是什么样的呢？我们很难在读代码的时候看出来。往往需要在浏览器中运行才能知道结果。

比较差的模块化

目前的 CSS 可以比较方便的实现继承，但是对于一个模块来说，需要引用模块的默认 CSS，然后再写我们要的 CSS 来覆盖，做起来还是很麻烦。

当然我们可以用 Less 等预编译 CSS 工具来实现更好的继承。

但是为什么不直接把 CSS 声明到 Style 属性中呢？如果我们把所有样式都写在 JavaScript 中，然后用 对象的继承，依然可以实现 CSS 样式的继承。而且解决了上面提到的优先级，定位最终样式和模块化的问题。

你会说：Style 属性上的样式难维护，性能差。但是这几年浏览器性能越来越优秀，终端设备的性能也是越来越优秀了，那么我们为了提高开发效率，当然可以尝试一下这样的做法了。

html

非常差的模块化

如果我要写一个控件组件，我让使用者来填写 HTML 结构，那么使用者会抄下来我提供的 Demo，然后改一改，改成他们要用的内容。如果我的组件没有 Demo 呢？

如果我把 HTML 写在 JavaScript 中，用 JavaScript 来做渲染，那么就能解决这个问题了。使用组件的人再也不需要关心组件的 HTML 结构，生怕改到了不该改的东西，导致组件无法使用。

JavaScript

所以我认为未来的前端一定都是用 JavaScript 做渲染的。React 提供了这样一种封装方式，我们可以用它在 JavaScript 中写 HTML 结构，写 CSS 样式，做继承和封装。

React 解决了用 JavaScript 渲染的性能问题，但是 110K 的体积还是太大了。如果浏览器能原生支持 React，那就完美了。

Facebook 重新定义了前端。