杂谈 CSS IN JS

前言

关注点分离(separation of concerns)原则多年来大行其道,实践中一般将 HTML、CSS、JavaScript 分开编写维护,早期框架 angularjs 即是如此,直到 React 争议中问世,引领关注点混合趋势,驱使开发者重新审视 CSS 工程化发展。

尴尬的CSS

相对于 JavaScript 的突飞猛进,CSS 的发展缓慢,相对止步不前。随着前端职能扩大化成为常态,前端工程化日趋成熟,CSS 先天缺陷愈发明显:

全局作用域

缺乏高级编程特性

代码冗余

极限压缩

依赖管理

最大的缺陷来自于全局作用域,class name 全局生效,多人协作中的风格不一致,随时可能引发蝴蝶效应。为规避多人协作的风格冲突,社区提出 OOCSS,BEM 等方法论,但实践中完全取决于团队执行力度,笔者也曾苦恼于合理的命名,为避免冲突,导致类名冗长,无聊且痛苦。

缺乏高级编程特性影响同样深远,社区发展的预处理器能够有效缓解,sass,less,stylus

殊途同归,postcss 异军突起,基本实现变量、嵌套、变量、混合、扩展和逻辑等。随着 CSS 规范逐步推进,高级编程特性完全可期。笔者大胆断言,前端工程化的推进,已经基本解决CSS高级编程特性缺乏的问题。

代码冗余,极限压缩对开发的影响相对很小,经典的 bootstrap 就包含大量的冗余代码,但丝毫不影响其流行程度。

目前难以解决的是依赖管理,NPM 已经成为事实上的 JavaScript 包管理工具,而 CSS 始终没有发展出可用的管理模式,sass 的浅尝辄止,例如 bootstrap-sass, bourbon 等,显然无法满足需求。随着 React 引领的关注点混合,以组件为核心的开发模式,有效规避了 CSS 缺乏依赖管理的缺陷,笔者认为,依赖管理弊端完全可控,未来的发展,留给未来述说。

新锐的组件化

前端发展日新月异,React 在众人争议中进入视野,典型的 React 组件同时包含结构、样式、行为,示例如下:

前端应用由组件聚合而成,组件层面对 CSS 进行抽象,从而解决大型应用的 CSS 维护难题。社区出现的 CSS IN JS 解决方案,目前看来就是可行解决方案,其本质在于通过 JavaScript 来声明,维护样式,以 styled-components 举例:

样式寄生组件之中,组件挂载时,动态插入样式,实现按需加载,动态生成类名,隔离作用域。另外一种思路,通过 style 属性传入内嵌样式,完全规避选择器全局作用域的问题。

面向组件开发,为样式管理提供更多的可能性,完全使用 JavaScript 抽象,管理,维护样式,略显激进,但也不失为一种解决方案。

客观的分析

目前主流的 CSS IN JS 方案与传统的方式对比如下:

优势:

隔离作用域 -- 样式生效通过内嵌,或者生成独一无二的类名,避免出现选择器冲突;

高级编程特性 -- 充分利用 JavaScript 的能力增强对样式的控制;

样式按需挂载 -- 页面需要的样式才会加载,有效避免样式冗余;

依赖管理 -- 寄生于组件,利用现存的 NPM 生态进行包管理;

动态样式 -- 能够更加简单,直接的修改样式

劣势:

无法复用现有生态,特性完全依赖于库的实现;

编辑器代码补全,语法检查,语法高亮等需要插件支持;

伪类选择器(disabled、:before、:nth-child)支持诡异;

样式属性骆驼式命名;

独辟蹊径

笔者并不完全认同 CSS IN JS 的理念,也不反对将其应用于生产项目。CSS 中最严重的问题,不通过 CSS-in-JS 也能

有其他解决方案,也就是笔者当前使用的 CSS Module 方案。通过工程化的方式,将选择器编译为独一无二的类名,使用 JavaScript 管理选择器与元素的关联,仅此而已。

优势:

隔离作用域 -- 类名编译生成,有效避免选择器冲突;

样式按需加载 -- 利用 tree-shaking 机制,仅保留存在引用的选择器,有效避免样式冗余;

依赖管理 -- 关联组件,利用现存的 NPM 机制进行包管理;

充分利用现有生态 -- 编辑器高亮,自动补全,sass,postcss 高级编程特性;

劣势:

欠缺动态样式特性 -- 无法充分利用 JavaScript 的能力增强对样式的控制;

主观的感悟

本文未涉及的单文件组件也是可行方案之一,目前 Vue,Angular 等框架采用。笔者始终认为,与其创造更多抽象的技术让前端学习曲线更加陡峭,不如通过工程化的手段来修复存在的缺陷,理念上求同存异。面对各种技术方案,适合实际项目的方案才是最好的方案,选用预处理器 PostCSS,BEM,亦或动态编译,都需要结合业务场景、团队习惯等因素决策

支持作者。

关注公众号,获取动态。

  • 发表于:
  • 原文链接:http://kuaibao.qq.com/s/20171216G0GMMX00?refer=cp_1026

扫码关注云+社区