CSS 书写禅机
这是未来的趋势所向,如是我行。
注意:原文发表于 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 书写禅机的更多相关文章
- CSS书写顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, margin, padding)3. ...
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- html和css书写规范
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...
- CSS书写规范
一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...
- css书写规范及特殊样式
1.CSS书写顺序: (1)位置:position.top.right.z-index.display.float (2)大小:width.height.padding.margin (3)文字系列: ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- CSS书写建议参考
总结一些CSS书写建议提供大给家参考,这些是参考了一些文章以及我的个人经验总结出来. 1.能缩写的就尽量缩写吧,毕竟谁都不想多些一些也可以提高阅读体验.包括类名.颜色和css属性.
随机推荐
- ElasticSearch 介绍、Docker安装以及基本检索第三篇
一.简介 1.1 什么是Elasticsearch? Elasticsearch是一个分布式的开源搜索和分析引擎, 适用于所有类型的数据,包括文本.数字.地理空间.结构化和啡结构化数据.Elastic ...
- 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 ...
- Codeforces Round #626 Div2 D,E
比赛链接: Codeforces Round #626 (Div. 2, based on Moscow Open Olympiad in Informatics) D.Present 题意: 给定大 ...
- Educational Codeforces Round 88 (Rated for Div. 2) D. Yet Another Yet Another Task(枚举/最大连续子序列)
题目链接:https://codeforces.com/contest/1359/problem/D 题意 有一个大小为 $n$ 的数组,可以选取一段连续区间去掉其中的最大值求和,问求和的最大值为多少 ...
- PowerShell随笔10---Module
我们总不能把所有脚本文件零散的放着,就像创建一个项目一样,我们创建一个Module. 创建好之后如何让系统认识我们创建的Module呢,我们需要放在指定的位置. 那到底应该放在什么位置呢? 我们可以通 ...
- eclispe中解决OOM问题
-Xms256M -Xmx512M -XX:PermSize=256m -XX:MaxPermSize=512m
- webpack4.0源码解析之打包后js文件分析
首先,init之后创建一个简单的webpack基本的配置,在src目录下创建两个js文件(一个主入口文件和一个非主入口文件)和一个html文件,package.json,webpack.config. ...
- how to share UI components
how to share UI components The shared component cloud · Bit https://bit.dev/ A better way to build w ...
- Array.fill & String.padStart & String.padEnd
Array.fill & String.padStart & String.padEnd Array.fill arr.fill(value[, start[, end]]) http ...
- 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 ...