Skip to content

Latest commit

 

History

History
99 lines (65 loc) · 5.1 KB

185.md

File metadata and controls

99 lines (65 loc) · 5.1 KB
Raw
title
CSS 将死

到 B 站观看视频

今天这个话题挺大，主要讲讲 CSS 的短处，以及当代的 style 解决方案。其实《 CSS 将死》说的暂时可能有点早了，但是大家听听今天的内容，会发现是非常有说服力的。

如果浏览器支持 Sass

时至今日，还有人写纯 CSS 吗？应该没有了，我们大部分人都应该走这样一个路线：最早写纯 CSS ，然后就是 less+bootstrap ，再之后 sass+bootstrap ，再之后放弃 bs 只用 sass ，最后很多人是 sass 和 inline css 混用。

如果浏览器中能直接支持 Sass ，那就太好了。咱们可以不用编译 Sass 文件成为纯粹的 CSS 了，这样也就意味着，浏览器中可以使用变量，可以使用函数，这样就能在网站运行的时候，动态的进行 style 相关的运算了，这样带来的功能将会是非常强大的。

不过可惜，浏览器中是不能直接支持 Sass 的。但是幸运的是，我们甚至可以得到更好的结果，下面来揭晓。

生态系统已经改变

以前人们写 .html 文件比较多，现在要么写模板（ template ），要么写组件（ component ）。Nodejs 出现，改变了很多前端开发的游戏规则，现在我们可以通过 require() 来导入模块，通过 NPM 来分享模块。

现在人们写的 App 大部分都是强交互的，数据驱动的。而 CSS 的最大的问题就是很难实现动态行为，我们以前通常都是用 jquery 来 addClass() 和 removeClass() 来实现不同状态下的样式改变，但是其实这样的代码是不够直观的，而且灵活度也低。实际应用中，样式显示很多情况下都是有 if 前提条件的，比如，如果用户登录了，那么这个 box 就是绿色的，否则是红色的，如果怎样怎样，这部分样式就不显示了等等。

这些问题，最好的解决方法就是，我们的 style 要有动态运算能力。

JS 就是最好的解决方案

最好的效果是，样式可以在浏览器中实时的得到反复重新运算， 并且可以拿到 js 程序中或者浏览器环境中的各个变量条件。那要达成这样的效果其实很简单：我们就用 JS 来控制样式吧。

先看一个例子如下，我们的样式现在可以根据浏览器自身状态不同而自动调整。

var fooMargin = window.innerWidth/10

再来看一个例子。可以使用函数，来进行复杂的逻辑对比。

box.style({“padding”, function(d){
  return d.foo === bar ? 5:10;
}}

React 的 inline style

React 的作者之一 vjeux 有一个著名的演讲叫做 《 CSS in JS 》 。让我们很多人看到了无限的可能。每一个 React 组件，都是一个 JS 文件，同时 React 鼓励把 CSS 直接写到组件文件之中，这个就是 React 的 inline style 了。

inline style 看起来是下面这个样子：

var styles = {
  padding: computePadding(state)
}
<p style={styles}>My Things</p>

在 React 组件中，因为就是一个 js 文件，所以当然可以用任何的 Js 逻辑来操作 style 了，这个比 Sass 的那些功能要强大多了。React 组件是可以自动刷新的，所以修改 style 之后，组件的显示效果也就自动变了，整个结构非常的简单清晰。

虽然用 jquery 也是可以实现一些类似功能，但是效果跟 React 组件的方式简直没法比。 就像下面这样：

<p id="foo" style="padding: 10px">
  foobar
</p>

$('#something').on('click', function(){
  $('#foo').css({padding: "20px"});
})

这种方式，一旦情况变得复杂，代码就会写得很乱。

inline style 带来无限可能

我们真正需要的就是可以在浏览器中动态运算 style 的能力 所有的问题都会随之解决。

比如，判断用户登录状态来决定样式，就可以使用类似下面的代码：

color:this.loggedIn ? “green” ? ”red”

我们用 Sass 不用 CSS ，就是因为有逻辑控制，那逻辑控制 哪里来的，都是类似于 Js 这样的编程语言带来的。像变量使用以及函数使用等很多功能看起来 Sass 都有，但是如果使用了 js 操作 inline style 的方式，我们就可以在客户端实现的动态运算 ，可以拿到所有 JS 运行时可以得到的任何信息。所以跟 Sass 的那种先编译后运行的方式是非常不同的。 我们现在甚至可以在运算样式的时候使用 lodash/underscore.js 这些工具了，类似这样

this.fooCollection.map(function(d, i) {
  return this.checkIndex(i) ? 24 : 14;
}

非常颠覆性的结论

第一，没学过 Sass 没有关系，不用学，直接上手 React 的 inline style 。第二，面向对象 CSS ，Atomic CSS ，Bootstrap CSS ，很多传统的用来控制大型项目 CSS 不至于写乱的框架和方法论基本上都过时了，因为在 React inline style 这里，很多事情都变简单了。第三，告别样式层叠，告别全局性的 selector ，告别 CSS 很多固有的根本功能。

让我们把目光盯着 React ，盯着组件化思想吧。