Goober:轻量级CSS-in-JS解决方案

2020年12月30日11:12:51 发表评论 36 次浏览

本文概述

CSS最初是为了对整个网页设置样式而创建的。但是, 随着时间的流逝, 网站的复杂性越来越高, 这使得管理设计变得非常困难。 CSS没有模块的概念, 通过这些模块, 我们可以将代码分为不同的块。

甚至JavaScript最初都没有模块。但是, 随着时间的流逝, Web开发有了长足的发展。现在, 我们使用基于组件的库(例如React和Vue.js)来设计Web应用程序的前端。它强调了针对CSS的类似解决方案的需求。但是, 标准CSS没有提供任何编程概念。因此, 我们使用一种称为CSS-in-JS的解决方案。

有一些流行的CSS-in-JS库, 例如情感和样式化的组件。但是, 它们的主要问题是占用大约10KB至20KB的空间。你可能知道, 沉重的文件对页面加载时间有很大影响, 因此对网站在搜索引擎中的排名也有很大影响。所以, 克里斯蒂安·波特(Cristian Bote)创建了一个轻量级的替代方案, 古柏。它占用不到1KB的空间, 这使其成为高性能站点的首选。

傻瓜的特点

  • 吸引开发人员的主要功能是它的大小。不到1KB的轻量级占用空间使其在其他CSS-in-JS解决方案中脱颖而出
  • 它旨在与香草JavaScript及其前端库/框架(如React, Vue.js, Angular, Svelte等)一起使用。
  • 支持服务器端渲染
  • 社区规模不断壮大, 拥有约24名活跃贡献者
  • 自定义CSS属性的不同方法。例如, 通过为CSS标记的模板提供道具或将CSS与JSON结合使用。在此, 需要注意的重要一点是, 使用JSON / Object编写CSS代码会大大减少捆绑包的大小
  • 指定目标节点以附加样式标签的能力
  • 它使我们可以将整个文档和特定部分的代码分开
  • 轻松重用代码
  • 咕has有一种叫做关键帧使我们能够跨组件重用动画
  • 它有一个babel插件转换像样式标签到goober可以理解的格式, 例如styled(" tag")
  • 使用, 将goober与Gatsby集成官方插件
  • 解析CSS代码的能力
  • goober具有带有伪选择器的嵌套规则。它甚至具有嵌套的样式化组件
  • 它使我们能够扩展样式。例如, 我们可以用另一组CSS规则覆盖或使用" as"属性
  • 支持媒体查询(@media)和关键帧(@keyframes)
  • goober的一个有趣功能是它带有智能(惰性)客户端水化功能
  • 乐于助人自动前缀这样可以确保CSS代码在所有网络浏览器上都能正常运行。此功能也称为供应商前缀。 Goober背后的团队已经创建了一个单独的程序包来处理自动前缀

基准测试

自成立以来, goober取得了举世瞩目的成就开发者社区的改编。它鼓励goober背后的贡献者对其受欢迎的竞争对手进行性能比较。

因此, 他们选择了古柏, 情感和样式化的组件。然后, 每个库执行了85个样本, 以找出平均需要多少时间才能完成任务.

基准结果非常惊人:

  • 样式化组件已处理21, 469 ops / sec
  • 烟熏处理39, 348 ops / sec
  • 情感处理46, 504 ops / sec

显然, 这里的赢家是情感库。但是, 需要指出的是, 情感和样式化组件具有完善的API, 并且都具有200多个贡献者。而goober是CSS-in-JS库中的新竞争者。不过, 与情感库相比, 它在速度上击败了样式化的组件, 并且运行更紧密。

字母, 情感和样式组成部分之间的比较

在为goober编写任何代码之前, 我们先将其与流行的竞争对手(即情感和样式组件)进行比较。它将回答你的问题:"为什么我应该使用goober?"

特征 古柏 情感 样式化的组件
标记的模板文字
组成
整体风格
主题支持
媒体查询
嵌套选择器
附加道具
服务器端渲染
每秒平均操作数 39, 348 46, 504 21, 469
图书馆规模 小于1kB 约11kB 〜12kB
贡献人数 24 211 283

在上表中, 你可以看到所有三个CSS-in-JS库具有共同的功能。但是, 它们的实现方式决定了库的性能。情感比两者都快, 但是goober的足迹小可以为其用户带来优势。

Goober入门

让我们使用Facebook的create-react-app项目快速设置一个React应用。为此, 请按照以下步骤操作。

我们为制作了一个自定义演示.
不完全是。点击这里查看.

Goober:轻量级CSS-in-JS解决方案1

首先, 在" my-app"文件夹中创建项目:

npx create-react-app my-app

然后在文件夹内移动:

cd my-app

现在, 我们需要安装goober库:

npm install goober

至此, 我们准备编写将goober与React集成的代码。我们将首先创建一个包含一个标题和三个段落的简单网页。

标题样式非常简单, 因为我们直接定位<h1>标签。而对于段落, 我们将一次定义所有通用代码。然后, 将其分别扩展到每个段落。将以下代码粘贴到src / index.js中:

import React from "react";
import ReactDOM from "react-dom";
import { styled, setup } from "goober";

setup(React.createElement);

const Title = styled("h1")`
  font-weight: bold;
  color: #00f;
`;

const P = styled("p")`
  font-weight: bold;
`;

const P1 = styled(P)`
  color: #f00;
  font-style: italic;
  font-weight: normal;
`;

const P2 = styled(P)`
  color: pink;
  text-decoration: underline;
`;

const P3 = styled(P)`
  color: #bb0276;
`;

function App() {
  return (
    <div className="App">
      <Title>Hello World</Title>

      <P1>This is paragraph # 1 that is designed with goober.</P1>

      <P2>This is paragraph # 2 that is designed with goober.</P2>

      <P3>This is paragraph # 3 that is designed with goober.</P3>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

你现在可以通过在控制台窗口中执行以下命令来测试此代码:

npm start

它看起来像这样:

“ hello world”傻瓜

以上代码说明

首先, 我们导入了所需的软件包React, ReactDOM和古柏使一切正常工作。然后, 我们必须致电设定()方法从头开始。重要的是要注意设定()必须先使用styled()功能。

之后, 我们将使用标记的模板文字为标题和段落创建不同的CSS规则。

用道具定制风格

在goober中有多种自定义样式的方式。其中之一是使用道具。基本上, 我们使用prop设置所需的值, 并在所需的模板文字中访问它们styled()功能。

例如:

const Title = styled('h1')`
  color: ${props => props.textColor};
  font-size: 3rem;
`;

function App() {
  return (
    <div className="App">
      <Title textColor="red">Hello World</Title>
    </div>
  );
}

以上代码说明

在这里, 你可以看到我们添加了称为textColor并为其分配值"红色"。然后, 我们使用styled()函数的模板文字内的props将值分配给CSS的" color"属性。

整体风格

咕o包着一个叫做球状。它用于指定将应用于整个文档的全局样式。这在Web设计中非常有用, 不同元素之间有很多共同的代码。

例如, glob函数非常适合包含将在整个网页上使用的任何外部字体。大多数人甚至使用它来编写" CSS Reset"规则。首先, 我们首先需要导入球状来自古柏像这样:

glob`
  body {
    margin: 0;
  }
`;

缺少styled.tag

如果你曾经使用过样式化组件库, 那么你可能会熟悉它的样式标签功能。在使用CSS-in-JS解决方案的开发人员中, 它非常受欢迎。

goober默认不支持此格式。但是, 贡献者和团队已经开发了一个babel插件。该插件用于将所有style.tag引用转换为goober可以理解的格式。

总结

goober开发背后的主要思想是为流行的CSS-in-JS库(如情感库和样式化组件)引入轻量级替代方案。因此, 你应该在以下情况下使用它:

  • 当你希望网页加载速度更快时
  • 你的网站访问量很高(即每月有数百万用户)。例如新闻网站, 博客, SaaS应用程序或社交媒体网络等。这是因为goober的大小小于1 kB, 因此与竞争对手相比不会占用太多带宽

我没有发现goober的任何重大缺点, 因为该团队在提供竞争对手所拥有的几乎所有功能方面确实做得很好。并且全部使用非常小的代码库。

日志火箭:全面了解你的网络应用

LogRocket仪表板免费试用横幅

日志火箭是一个前端应用程序监视解决方案, 可让你重播问题, 就好像问题发生在你自己的浏览器中一样。 notlogy无需猜测错误发生的原因, 也不要求用户提供屏幕截图和日志转储, 而是让你重播会话以快速了解出了什么问题。无论框架如何, 它都能与任何应用完美配合, 并具有用于记录来自Redux, Vuex和@ ngrx / store的其他上下文的插件。

除了记录Redux动作和状态外, notlogy还会记录控制台日志, JavaScript错误, 堆栈跟踪, 带有标题+正文, 浏览器元数据和自定义日志的网络请求/响应。它还使用DOM来记录页面上的HTML和CSS, 甚至可以为最复杂的单页面应用程序重新创建像素完美的视频。

免费试用

.

一盏木

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: