这是未来的趋势所向,如是我行。

注意:原文发表于 2017-9-6,随着框架不断演进,部分内容可能已不适用。

CSS 日渐惹人憎恶。

究其原因颇多,归根结底,皆因 CSS 给人的感觉总是飘渺迷蒙、变幻莫测。

譬如微调某个样式后,却出乎意料地殃及一些看似毫无瓜葛的布局,尤其是准备部署之时。

这类经验如果你从未体会过的话,你要么是不明就里的新手,要么是登峰造极的高人。

故此 JavaScript 社区又开始撸起袖子着手炮制,只消数载,各色各样的 CSS 库宛如雨后春笋不断涌现,它们统称为 CSS-in-JS。

然而 CSS 最棘手的问题也许并不需要 CSS-in-JS 亦可解决,对此你可能还不知情。

倘若果真如此,那么编写 CSS 将是一种惬意的享受,而非痛苦的忍受,此外,CSS-in-JS 也会产生新的问题要去解决,未免有点旁生枝节。

本文并非要和 CSS-in-JS 针锋相对,也不否定社区所做的努力,它在 JS 生态中如此活跃,且每周都有新的想法出现。

其实我目的是想介绍一种让人更加愉快的替代方案 —— 它就是带有真正 CSS 的单文件组件!

CSS 最大的问题

CSS 中的一切都是全局的,正因如此,为某个标记上编写的样式,可能会使另一个标记受到牵连。

也正因如此,开发者经常借助于各种命名空间的约定(而非“规则”,因为难以实施),但此法只会徒增 RSI 的风险。

如果你置身于团队之中,情况愈加恶劣。他人所写的样式无人敢改,通常无法猜测它们是做什么用的,应用在哪些标记了,以及如果删掉会带来什么灾难。

其结果是:样式表必须只增不减

你无法得知哪些代码可以安全地删除。因此常见的做法是用一些更具体的样式来覆盖现有样式,哪怕是在相对较小的项目上亦是如此。

单文件组件扭转乾坤

SFC 背后的思想十分简单:在一份 HTML 文件中编写组件,该文件可以包含描述组件样式的 <style> 和描述行为的 <script> 标记。

Svelte、Ractive、Vue 以及 Polymer 都是遵循这种模式。

(显然我们在文章其余内容都将使用 Svelte,但是如果使用模板会让你胆战心惊的话,其实你的担心是多余的,不过这又是另一个话题了,那你可以使用 Vue,它允许你在 SFC 中编写 JSX)

如果你从未接触过 Svelte,不妨先参看这篇文章:无招胜有招:为何我们没有及早悟到这个办法?,或者看看用户评价

应用这种模式,结果会发生几件美妙的事情:

  • 组件的样式都是局部样式(scoped),不会向外泄露,没有不可预知的级联情况,彻底摆脱为了防止名称冲突而硬取的超级啰嗦的类名。
  • 你无需再去文件夹中苦苦追查那些破坏你样式的规则。
  • 编译器(例如 Svelte)能够识别和删除无效的样式,从此不再是“只增不减”了!

下面我们来试试探明究竟。

< 因不支持插入视频,点击此处观看视频 >

这就是所谓的 “use the platform”?

所有代码编辑器都能识别这些 CSS,其内置了自动完成、监测、语法高亮等等功能,无需额外的 JS 各种庞杂的工具。

同时,这些都是真正的 CSS,并非那些使用了驼峰命名及双引号无处不在的鱼目混珠的东西。

我们可以在 devTools 中对样式进行修葺调整,再复制粘贴回代码中,如此行云流水的工作方式,我再也无法离开这种酸爽。

不得不说,CSS source maps 功能已是开箱即用的,因此你能快速定位问题所在的行。

其重要性不言而喻:

当你使用所见即所得(WYSIWYG)的模式之时,你不会从组件树的角度去思考问题的,因此亟需一个万全之策使有问题的样式原形毕露。

如果组件本就出自他人之手,情况尤其堪忧。(我敢保证,这种 CSS 工作方式能极大提升你的生产力,离开 source maps,毋庸置疑你是在虚耗光阴,因为我曾经就是如此。)

Svelte 转译你的 CSS 选择器来实现让样式只应用在局部范围内,它同时也适用于受影响的元素的属性,尽管确切的机制无关紧要,并且可能会有所变化。

未使用的规则会被移除并发出警告,然后你可以将精简后的结果写到 .css 文件中。

还有一个实验性的新功能,就是可以编译组件为 Web Components,然后将样式封装到 shadow DOM 中(如果这刚好就是你所期望的话)。

一切皆有可能,因为你的 CSS 在标记的上下文中被解析(使用 css-tree)和静态分析。

静态分析为未来各种令人振奋的可能性打开大门:更智能的优化手段,各种提示……

但是如果你的样式需要在运行时才去动态计算的话,则做这些事情要困难得多。

我们也才刚刚开始。

但我们也可以借助工具来做啊 [X]!

如果你看了视频后的反应是:“很好,但是 —— 我们使用 TypeScript,且为各种编辑器编写插件,也能获得自动完成和语法高亮的功能啊。”

换而言之,为了获得与 CSS 等价的效果,而去折腾构建、文档、推进及维护等等一堆辅助性的项目,如果你认为这些事情意义重大……

那么,多说无益,你和我是道不同,不相为谋了!

我们仍然没有全部答案

综上所述。

诚然,CSS-in-JS 确实对一些悬而未决的问题给出了答案:

  • 如何从 npm 安装样式?
  • 我们如何重用一些定义在同一个地方的常量?
  • 如何组合声明?

就个人而言,我认为所得的好处,没有超出上述这些问题的范围。

你的选择可能有不同的优先次序,使你放弃 CSS 有足够的理由。

但总的来说,你还是必须了解 CSS 的,不论热爱还是憎恶,最终都在所难免要学习它。

作为 Web 的守望者,我们可以做选择:

创建高深莫测的抽象,让 Web 开发者的学习曲线更加陡峭,或者一起解决 CSS 糟粕部分。

怎么选择,我已心中有数。

<The End>

CSS 书写禅机的更多相关文章

  1. CSS书写顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, margin, padding)3. ...

  2. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  3. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

  4. CSS书写规范

    一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...

  5. css书写规范及特殊样式

    1.CSS书写顺序: (1)位置:position.top.right.z-index.display.float (2)大小:width.height.padding.margin (3)文字系列: ...

  6. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  7. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  8. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  9. CSS书写建议参考

    总结一些CSS书写建议提供大给家参考,这些是参考了一些文章以及我的个人经验总结出来. 1.能缩写的就尽量缩写吧,毕竟谁都不想多些一些也可以提高阅读体验.包括类名.颜色和css属性.

随机推荐

  1. ElasticSearch 介绍、Docker安装以及基本检索第三篇

    一.简介 1.1 什么是Elasticsearch? Elasticsearch是一个分布式的开源搜索和分析引擎, 适用于所有类型的数据,包括文本.数字.地理空间.结构化和啡结构化数据.Elastic ...

  2. I - Swap(交换行列是对角线都为1)

    Given an N*N matrix with each entry equal to 0 or 1. You can swap any two rows or any two columns. C ...

  3. Codeforces Round #626 Div2 D,E

    比赛链接: Codeforces Round #626 (Div. 2, based on Moscow Open Olympiad in Informatics) D.Present 题意: 给定大 ...

  4. Educational Codeforces Round 88 (Rated for Div. 2) D. Yet Another Yet Another Task(枚举/最大连续子序列)

    题目链接:https://codeforces.com/contest/1359/problem/D 题意 有一个大小为 $n$ 的数组,可以选取一段连续区间去掉其中的最大值求和,问求和的最大值为多少 ...

  5. PowerShell随笔10---Module

    我们总不能把所有脚本文件零散的放着,就像创建一个项目一样,我们创建一个Module. 创建好之后如何让系统认识我们创建的Module呢,我们需要放在指定的位置. 那到底应该放在什么位置呢? 我们可以通 ...

  6. eclispe中解决OOM问题

     -Xms256M -Xmx512M -XX:PermSize=256m -XX:MaxPermSize=512m 

  7. webpack4.0源码解析之打包后js文件分析

    首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...

  8. how to share UI components

    how to share UI components The shared component cloud · Bit https://bit.dev/ A better way to build w ...

  9. Array.fill & String.padStart & String.padEnd

    Array.fill & String.padStart & String.padEnd Array.fill arr.fill(value[, start[, end]]) http ...

  10. web cache & web storage all in one

    web cache & web storage all in one web cache in action web cache best practices web storage in a ...