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属性.
随机推荐
- xLua热更新插件
一.xLua插件下载安装 1.从GitHub上搜索并下载插件 2.将文件复制到unity中 3.检查是否有错误 二.在unity中调用lua 1.简单调用 在c#脚本中使用LuaEnv类可以运行lua ...
- linux(10)linux vi/vim
前言 所有的 Unix Like 系统都会内建 vi 文书编辑器,其他的文书编辑器则不一定会存在. 但是目前我们使用比较多的是vim编辑器. vim 具有程序编辑的能力,可以主动的以字体颜色辨别语法的 ...
- Educational Codeforces Round 97 (Rated for Div. 2) E. Make It Increasing(最长非下降子序列)
题目链接:https://codeforces.com/contest/1437/problem/E 题意 给出一个大小为 \(n\) 的数组 \(a\) 和一个下标数组 \(b\),每次操作可以选择 ...
- python爬取QQVIP音乐
QQ音乐相比于网易云音乐加密部分基本上没有,但是就是QQ音乐的页面与页面之间的联系太强了,,导致下载一个音乐需要分析前面多个页面,找数据..太繁琐了 1.爬取链接:https://y.qq.com/ ...
- Codeforces Round #177 (Div. 2) B. Polo the Penguin and Matrix (贪心,数学)
题意:给你一个\(n\)x\(m\)的矩阵,可以对矩阵的所有元素进行\(\pm d\),问能否使得所有元素相等. 题解:我们可以直接记录一个\(n*m\)的数组存入所有数,所以\((a_1+xd)=( ...
- CF1475-D. Cleaning the Phone
CF1475-D. Cleaning the Phone 题意: 手机上有很多应用非常占用内存,你要清理内存.对于每个应用\(i\)有以下描述:应用\(i\)占用了\(a_i\)的空间,它的方便度为\ ...
- 如何创建一个GETH节点(单节点,windows环境)
所有命令都是在powershell上执行的 1.创建"创世块" 初始化配置 创建一个 hdgenesis.json文件,拷贝到geth根目录 { "config&q ...
- Python append() 与深拷贝、浅拷贝
在leetcode77中,发现list.append的结果不对.原代码: class Solution: def combine(self, n: int, k: int) -> List[Li ...
- Leetcode(869)-重新排序得到 2 的幂
从正整数 N 开始,我们按任何顺序(包括原始顺序)将数字重新排序,注意其前导数字不能为零. 如果我们可以通过上述方式得到 2 的幂,返回 true:否则,返回 false. 示例 1: 输入:1 输出 ...
- 牛客多校第五场B generator1(十进制矩阵快速幂)题解
题意: 已知 \(X_i = a * X_{i - 1} + b * X_{i - 2}\),现给定\(X_0,X_1,a,b\),询问\(X^n \mod p\),其中\(n <= 10^{1 ...