目标:Gitlab博客的新设计新利18官方网站

2021年3月数字体验团队为GitLab博客部署了新的改进设计。新利18官方网站这一设计变化影响了超过1300篇博客文章。新利18官方网站这是迄今为止规模最大的运动我们的设计系统,拖鞋。由于Gitlab博客的年龄和大小,它提出了挑战。新利18官方网站我们想辜负Gitlab的迭代值:“做尽可能小的事情,并尽快完成。”

主要挑战:渐进地采用具有冲突CSS的新设计系统

拖鞋使用顺风CSS,它随附自己的基础样式,称为起飞前的。飞行前的行为就像正常化的风格(它是建立在上面modern-normalize),这对新项目或进行全面过渡的项目很有用。在我们的情况下,Preflight是一个障碍,因为它必须与我们现有的CSS一起工作。

我们探索了一些开箱即用的解决方案,比如启用Tailwind!重要的配置,或使用a非常具体的选择策略

在这两种情况下,我们非常接近我们所需的结果,但仍然存在问题:

关键的遗留组件需要旧的CSS。那些旧款式已经过时了重要的!以及选择器策略,因为它们应用于我们在Tailwind实用程序中没有指定的属性。解决这些冲突将花费太多的时间和体力。我们想要更多高效的解决方案,因此我们专注于两件事:识别我们的CSS的理想状态,并找到更好的CSS封装。目标是防止现有的样式影响新组件,以及影响旧组件的新样式。

解决方案:CSS封装与web组件

Web组件技术为我们使用旧CSS的需求提供了一个引人注目的解决方案。我们使用了阴影DOM封装CSS。模板和插槽允许我们使用现有的HTML,ERB和HAML模板。自定义元素把它整合在一起。

在里面顶级博客模板新利18官方网站,我们放置了博客文章标记的模板标记新利18官方网站。这模板标签是有效的HTML - 这意味着我们的模板引擎可以在其内部处理所有内容。我们可以用部分的标签和屈服正如预期的那样,它们成为模板的一部分。下面的输出显示了哪些看起来(简洁的某些类):

<模板id =“slp-新利18官方网站blog”><主要类=“slp新利18官方网站Blog”><头类=“slp新利18官方网站blog__header”><%=部分的“包括/ cms / blo新利18官方网站g_post / slp-blog-avatar”,当地人:{作者:作者}% ><%=部分的“包括/ cms / blo新利18官方网站g_post / slp-tags”% >
<文章类=“slp新利18官方网站blog__article”><如果current_page数据image_title% >< imgalt =”“src =<%=current_page数据image_title% >宽度=“100%”/><结束% ><%=屈服% >< / >条<旁边类=“slp新利18官方网站Blog__aside”><%=部分的“包括/ cms / blo新利18官方网站g_post / slp-social-power”% ><插槽名称=“non-slippers-aside-items”> 除了< / ><页脚类=“slp新利18官方网站blog__footer”>
<%=部分的“包括/ CMS / Blo新利18官方网站g_Post / SLP相关内容”% ><插槽名称=“non-slippers-footer-items”>
< /页脚>< /主要>Data-cookieConeent =“忽略”src =“/ javascript / slipper新利18官方网站s-blog.js”类型=“text / javascript”>

顶层模板加载源/ javascripts / slippers-bl新利18官方网站og.js身体的文档,它阻塞呈现,直到脚本完成加载。源/ javascripts / slippers-bl新利18官方网站og.js将拖车CSS作为变量导入使用webpack加载器语法。CSS作为一个变量存储,我们可以将它注入自定义元素定义

接下来,我们注册SLP-新利18官方网站Blog.作为自定义元素。当DOM解析标记时,它将渲染博客帖子模板,也将在罕见的情况下,我们的JavaScript没有加载,它将失败。新利18官方网站如果失败,我们返回到屈服输出在轻DOM确保关键内容永远不会丢失。在这些情况下,我们的静态站点生成器已经呈现了模板,所以访问者仍然可以访问博客文章的图像和文本。新利18官方网站

下面是JavaScript的样子:

进口vue.'vue / dist / vue.min.js'进口拖鞋'拖鞋 -  ui / dist / slipperscomponents.common.js'/ / eslint-disable-next-line进口/ no-webpack-loader-syntax常量css=需要(“!原始装载机!Sass-Loader!../ stylesheets / slippers.css.scss”)。默认的;//为了简洁起见,省略了一些事件处理程序和其他要求出口功能initializeSlippersWebComponent(){如果(窗口customElements){customElements定义(“slp-新利18官方网站blog”,扩展htmlelement.{构造函数(){极好的();常量模板=文档getElementById(“slp-新利18官方网站blog”)。内容;常量shadowRoot=attachshadow.({模式:'打开'});shadowRootinnerhtml.=' <时尚>$ {css}> < /风格的;shadowRoot列表末尾(模板版本(真的));}});}}

如果脚本成功加载,我们的回退生成的轻DOM内容屈服语句在呈现自定义组件时被丢弃。这就是我们预先使用内联脚本标记的原因-以避免无样式内容的Flash

最后,我们可以使用槽渲染非拖鞋项目。槽元素从轻DOM获得CSS,所以我们的预先存在部分和其他包括模板将按预期工作。

我们的自定义元素和它的插槽看起来像这样:

< slp新利18官方网站-blog ><%=屈服% >< divslot =.“non-slippers-aside-items”><%=部分的“包括/ newsletter-signup.html”% >< / div >< divslot =.“non-slippers-footer-items”><除非current_page数据install_cta==.% ><%=部分的”包括/博客/试一试新利18官方网站”% ><结束% ><如果ci_environment吗?% ><%=部分的“包括/博客/评论”新利18官方网站% ><结束% >< / div >

结果:快速迭代,最小的权衡

我们的解决方案有一些权衡:

  1. 我们为我们的博客文章增加了构建过程的复杂性。新利18官方网站
  2. Web组件有广泛的浏览器支持,但这只是最近的发展。围绕这些工具的最佳实践仍然存在争议。
  3. 从技术上讲,我们在静态生成的站点中添加了客户端渲染,这意味着我们要放弃一些静态站点的优点来实现CSS封装。

这些权衡最终是值得的。我们实现了近乎完美的CSS封装,这使得我们能够迭代拖鞋并有效地发布博客模板。新利18官方网站对于那些不能或不愿加载JavaScript来阅读我们的帖子的人,我们有合理的后备方案来保存关键内容。Web组件是未来的趋势,我们很高兴能够负责任地使用它们。

尝试所有GitLab功能——30天免费

Gitlab不仅仅是源代码管理或CI / CD。它是一个完整的软件开发生命周期和Devops工具在一个应用程序中。

尝试GitLab免费
18新利赢钱