专栏首页code秘密花园[译] 为什么我用 JavaScript 来编写 CSS

[译] 为什么我用 JavaScript 来编写 CSS

译者:Ivocin 校对者:MacTavish Lee, Mirosalva

三年来,我设计的 Web 应用程序都没有使用 .css 文件。作为替代,我用 JavaScript 编写了所有的 CSS。

我知道你在想什么:“为什么有人会用 JavaScript 编写 CSS 呢?!” 这篇文章我就来解答这个问题。

CSS-in-JS 长什么样?

开发者们已经创建了不同风格的 CSS-in-JS。迄今为止最受欢迎的,是我和他人共同开发的一个叫做 styled-components 的库,在 GitHub 上有超过 20,000 颗星。

如下是它与 React 一起使用的例子:

import styled from 'styled-components'
const Title = styled.h1`  color: palevioletred;  font-size: 18px;`
const App = () => (  <Title>Hello World!</Title>)

复制代码

这会在 DOM 里渲染一个字体大小为 18px 的浅紫红色的 <h1>

为什么我喜欢 CSS-in-JS?

主要是 CSS-in-JS 增强了我的信心。我可以在不产生任何意外后果的情况下,添加、更改和删除 CSS。我对组件样式的更改不会影响其他任何内容。如果删除组件,我也会删除它的 CSS。不再是只增不减的样式表了!✨

信心:在不产生任何意外后果的情况下,添加、更改和删除 CSS,并避免无用代码。

易维护:再也不需要寻找影响组件的 CSS 了。

尤其是我所在的团队从中获取了很大的信心。我不能指望所有团队成员,特别是初级成员,对 CSS 有着百科全书般的理解。最重要的是,截止日期还可能会影响质量。

使用 CSS-in-JS,我们会自动避开 CSS 常见的坑,比如类名冲突和权重大战(specificity wars)。这使我们的代码库整洁,并且开发更迅速。?

提升的团队合作:无论经验水平如何,都会避开 CSS 常见的坑,以保持代码库整洁,并且开发更迅速。

关于性能,CSS-in-JS 库跟踪我在页面上使用的组件,只将它们的样式注入 DOM 中。虽然我的 .js 包稍大,但我的用户下载了尽可能小的有效 CSS 内容,并避免了对 .css 文件的额外网络请求。

这导致交互时间稍微长一点,但是首次有效绘制却会快很多!??

高性能:仅向用户发送关键 CSS 以快速进行首次绘制。

我还可以基于不同的状态(variant="primary" vs variant="secondary")或全局主题轻松调整组件的样式。当我动态更改该上下文时,该组件将自动应用正确的样式。?

动态样式:基于全局主题或不同状态设置组件样式。

CSS-in-JS 还提供 CSS 预处理器的所有重要功能。所有库都支持 auto-prefixing,JavaScript 原生提供了大多数其他功能,如 mixins(函数)和变量。

我知道你在想什么:“Max,你也可以通过其他工具或严格的流程或大量的培训来获得这些好处。是什么让 CSS-in-JS 变得特别?”

CSS-in-JS 将所有这些好处结合到一个好用的包中并强制执行它们。它引导我走向成功的关键:做正确的事情很容易,做错事很难(甚至不可能)。

谁在使用 CSS-in-JS?

有上千家公司在生产中使用 CSS-in-JS,包括 Reddit、Patreon、Target, Atlassian、Vogue、GitHub、Coinbase 等等。(包括本网站)

CSS-in-JS 适合你吗?

如果你使用 JavaScript 框架来构建包含组件的 Web 应用程序,那么 CSS-in-JS 可能非常适合。特别是你所在团队中每个人都理解基本的 JavaScript。

如果你不确定如何开始,我会建议你尝试一下 CSS-in-JS,亲眼看看它有多好!✌️

本文分享自微信公众号 - code秘密花园(code_mmhy),作者:Ivocin

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-10-17

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 一个白学家眼里的 WebAssembly

    作者:doodlewind | 花名雪碧 | github.com/doodlewind

    ConardLi
  • 当浏览器全面禁用三方 Cookie

    苹果公司前不久对 Safari 浏览器进行一次重大更新,这次更新完全禁用了第三方 Cookie,这意味着,默认情况下,各大广告商或网站将无法对你的个人隐私进行...

    ConardLi
  • 微信支持H5跳转App、跳转小程序

    根据刀哥多年写代码要看文档的经验来看,证实了这次更新不仅支持了打开小程序,连app也顺带支持了,这个信息量着实有点大

    ConardLi
  • 只写CSS的禅

    CSS不受欢迎是一个很普遍的现象。导致这一现象的原因有很多,但可以归结为:CSS的不可预测性。如果你在开发中从未有过这种经历:过调试一个样式时,一不小心破坏布局...

    疯狂的技术宅
  • 学习纲要:CSS 基础概念

    Joel
  • css-in-js 探讨

    Web开发是需要掌握多种技术。我们习惯于与多种语言密切合作。而且,随着开发Web应用程序变得越来越普遍和差别细微化,我们经常寻找创造性的方法来弥合这些语言之间的...

    frontoldman
  • 技术天地 | CSS-in-JS:一个充满争议的技术方案

    为了解决传统CSS在现代前端应用开发中遇到的痛点,FreeWheel评估了大量新一代的CSS框架/工具/方案。在本文中,作者以评估过程为线索,介绍了CSS-in...

    用户6543014
  • 前端练级攻略(第一部分)

    我记得我刚开始学习前端开发的时候。我看到了很多文章及资料,被学习的资料压得喘不过气来,甚至不知道从哪里开始。

    前端小智@大迁世界
  • 前端开发,从草根到英雄(第一部分)

    我还记得当我刚开始学习前端开发时,我被大量的技术文章淹没,当时让我非常困惑的是:我究竟需要学多少知识才算足够,我甚至不知道从哪里开始。 这篇指南会告诉你学习前端...

    用户1667431
  • Web真相: CSS不是真正的编程

    每隔几个月就会出现一篇文章表明:CSS并不是真正的编程语言。以编程语言的标准来说,CSS过于困难。使用这门语言会很有创造性:

    疯狂的技术宅

扫码关注云+社区

领取腾讯云代金券