首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

CSS in JS 新秀:vanilla-extract 浅析

前言 2021年,vanilla-extract 作为黑马登顶了 css-in-js 满意度榜首(虽然使用率仅为1%),号称是一个类型安全、高度兼容 TS 场景的库,国内相关讨论还很少,稍微看了一下还挺好用的...作为一个如果使用 css-in-js 会首选styled-components的我来说,比较关注的点主要是: All styles generated at build time Type-safe styles.../src/index.js', // .......在其内部通过eval库在编译时先执行得到className结果,避免在运行时执行过程; 再移除@vanilla-extract/css库,使其不会影响到生产环境下js包体大小; 构建样式API 这里只会对...总结 目前了解下来,vanilla-extract是一个总体还不错的css in js库,虽然目前使用率比较低,但是后续厂商平台项目会考虑在一些地方使用看看效果(毕竟不会增大js体积)。

2.1K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    vanilla-tilt.js平滑3D倾斜库的使用

    文章概要:vanilla-tilt.js是Javascript中一个平滑的3D倾斜库,可以让网页的一些控件变得动态起来,本篇文章主要讲述了如何下载及在网页代码中配置vanilla库。...目录 vanilla库安装 vanilla库配置 案例演示 vanilla库安装          因为网页内设置文件下载不方便,这里将代码放出来,全部复制后,新建一个js文件并且命名为vanilla-tilt.js...* Original idea: https://github.com/gijsroge/tilt.js * MIT License....库配置 同一目录下.png 将上一步中的vanilla-tilt.js库和要引用的网页文件放置在同一目录下 ---- 在要引用vanilla库的网页文件源代码中进行配置 在源代码最后使用标签导入vanilla库 script标签导入库.png // vanilla-tilt.js

    1.9K30

    国外轻量级开源论坛系统vanilla Forums介绍

    另外vanilla默认会在首页中直接列出所有贴子,按照时间顺序,把最新的讨论贴放在最前面和概念中的论坛相比更加像博客。...vanilla所有的功能和模块都是通过应用(Applications)和插件(plugins)来实现,是一款灵活的轻量级论坛程序。...最初看到vanilla Forums(注目:不是吃的草莓……)是在煎蛋最初的论坛上面,当然那时还不知道这就是vanilla Forums,正式知道叫做vanilla Forums还是在09年的时候,当时在家无聊...不是很甘心,于是上php-open上面查看一下有什么收获没有,果然发现了vanilla Forums的踪迹,当时vanilla Forums的版本是1.1.9,界面如下,搭建后放了上一个空间商,发了一些帖子...新安装的vanilla Forums会自动开启两个应用, vanilla 和 Conversations ,其中vanilla是核心应用,禁用之后论坛不能被访问,看到有说官方有提供1.0版本和2.0版本

    4.7K20

    前端食堂技术周刊第 60 期:TypeScript 4.9、Ant Design 5.0、Node.js 安全最佳实践

    CSS-in-JS 动态主题 为了降低维护成本,选择了 CSS-in-JS 方案,此方案不需要维护中间变量,但是有更多的运行时消耗。...但是为了不损害用户体验,研发了针对组件级别的 CSS-in-JS 库 @ant-design/cssinjs,通过牺牲动态性来获取更高的缓存效率,从而减少运行时的性能损耗; 新的 CSS-in-JS 方案原生支持...兼容性调整 Ant Design v5 兼容性调整从 IE 11 提升至 Edge,其余现代浏览器不变; 默认 Day.js 代替 Moment.js; API 非 Break 调整、组件移除(移除 Comment...技术资料 1.用 vanilla-extract 编写高性能的 CSS[4] 一篇 vanilla-extract 入门指南的长文。...3.Node.js 安全最佳实践[6] Node.js 官方团队发布的一篇关于安全最佳实践的博文。

    99220

    如何制作自己的原生 JavaScript 路由

    但实际上,这些库和框架仍然使用 vanilla JavaScript。那么该怎么实现呢? 我希望这个“JavaScript 路由教程”能够帮你了解如何用原生 JS 写出自己的路由。...最重要的是,使用 vanilla JS router 可以减少你对框架的依赖。 只要你了解实现它所涉及的所有部分,就可以相对容易的在原生 JavaScript 中创建自己的路由。...JavaScript 的 History API 我看过很多没有提到 JavaScript History API 的 vanilla JS router 教程。...基于 History API 的 Vanilla JS 路由设置 先让我们仔细研究构建 URL 切换器所需的最少代码(而无需刷新页面),然后我会向你展示其的工作方式的 GIF 动图。...原文链接 https://www.freecodecamp.org/news/making-vanilla-js-router-in-javascript/

    3.9K20
    领券