微信号:ardays

介绍:android每日绝对干货

漫谈 CSS in JS

2017-12-07 22:48 kai

传统的“关注点分离”(separation of concerns)原则中不推荐我们把 HTML、CSS、JS 混杂一起编写,但是在伴随着前端组件模式的大潮"关注点混合"慢慢成为主流。这中间经历了什么,让我们来一探究竟。

尴尬的CSS

JavaScript 近几年的巨大发展使之成为 Web 技术的主角这点是毫无异议,相比之下 CSS 就显得有点止步不前。随着 Web 工程化,传统 CSS 的很多问题愈加明显。

  • 全局作用域(样式冲突,命名冲突)

  • 不支持变量(部分浏览器支持)

  • 不支持嵌套,变量,混合,扩展和逻辑


为了解决上述问题,我们有了 Sass, BEM, CSS Modules 然而引入这些东西不但提高学习成本,还会带来新的问题。

对于 Sass,你需要学习新的语法,其次配置 Sass 的运行环境(安装过 node-sass 的朋友应该深有体会😂),我们有时候并不知道这个预处理器在背后做了什么,如果不正确的编写反而会导致编译出来样式文件变的更大。

BEM 是一套命名规则,确保 className 在一个项目中是唯一的,从而减少样式冲突。但是对我来说,为一个类取名实在是一个非常无聊且痛苦的事,CSS 类名也变得冗长,相对应增加打包出来 CSS 文件大小,CSS Modules 这点做的更好,通过工具来保证最后生成的类名是唯一的。

组件化

这个时候 React 出现了,一个典型的 react 组件文件可以包含结构、样式、逻辑。看起来像是回到原点,但是它有自己内部作用域,有利于组件隔离,不会像传统 HTML 直接把 CSS、JS 暴露到全局。所以这种”关注点混合“新写法逐渐成为主流。

对于使用组件的人来说,不需要引入多个文件;

对于编写组件的人来说,不依赖外部,方便复用;

const style = {
  color: 'red',
  fontSize: '46px'};const handleClick = () => alert('hi'); ReactDOM.render(
  <h1 style={style} onClick={handleClick}>
     Hello, world!
  </h1>,
  document.getElementById('app'));

CSS in JS

React 对于 HTML 使用 JSX 语言封装,除了 class => className, for => htmlFor 其它使用使用起来没有什么区别。但是对于 CSS 来说,这种对象封装形式有很多缺陷,例如不支持样式嵌套、keyframes、媒体查询等特性。

styled-components 是一个新的库,目的就是为了解决在 JSX 中编写 CSS 各种不便。它使用了 ES6 的模板字符串特性。通过将样式封装到一个组件中,这样非常符合 react 组件化的思想。并且由于最后是往 HTML 中插入 CSS,所以实际上它支持所有的 CSS 特性。同时它又能获取 JS 的 强大的控制力,变量、选择、混合等特性实现起来轻而易举。


const Button = styled.button`  border-radius: 3px;  padding: 0.25em 1em;  margin: 0 1em;  background: transparent;  color: palevioletred;  border: 2px solid palevioletred;  ${props => props.primary && css`    background: palevioletred;    color: white;  `}`;render(
  <div>
    <Button>Normal Button</Button>
    <Button primary>Primary Button</Button>
  </div>);


而类名是通过 Runtime 时计算而来,所以相当于帮助我们实现了局部作用域,不用担心会有类名冲突的问题。

通过 styled-components 得到短小精悍的类名

传统样式是全部写在一个 CSS 文件中,而有时候页面并不存在对应的 DOM 结构,浏览器会需要预先解析不存在的样式,拖慢页面渲染时间。 得益于样式组件化,我们可以做到精确的样式按需加载。

样式按需加载

总结

优势:

  • 样式组件化(治愈了我这个强迫症)

  • 按需加载样式

  • 局部作用域

  • 共享变量

  • 样式单元测试

  • 等...

劣势:

  • 新的依赖

  • 学习一个新的库(真的很简单)

最后

在传统观念看来把 HTML、CSS 和 JS 全部写在一个文件中似乎是件很奇怪的事,但是如果你尝试过后,我相信你会爱上这种开发体验。

而 styled-components 则是用 JS 武装过的 CSS,不需要学习 Sass 语法,也不需要杀死脑细胞去想该怎么命名一个 className。

 
Android每日干货 更多文章 探索ES2015:箭头函数(Arrow Functions) 微信浏览器踩坑集锦 详解Object.defineProperty() 基于css选择器设计交互效果时的一些思考 CSS学习笔记(渐变色文本)
猜您喜欢 Redis集群技术及Codis实践 【Docker】单机管理平台 Vulhub:一键搭建漏洞测试环境 华清远见冯老师谈“程序妞的自我修养” 喵叔叔是谁