企业云应用程序的 CSS 框架的最佳方法是什么?

2024-03-13

有多种方法可以设置每个页面中元素的样式,在企业应用程序中通常是CSS框架大小增加了约 1 MB,当您的用户使用较慢的互联网连接时,您应该减小 css 框架的大小。

我们可以为我们的元素创建新的 CSS,例如.Blah并在 css 框架中对其进行赋值,并对每个元素执行此操作,这会导致 css 框架的大小增加,但页面更干净

<div id="blah" class="blah"></div>

我们还可以使用我们的CSS框架公用事业在每个视图中格式化每个元素以保持CSS框架的大小,但页面不干净

<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>

在确保大多数用户使用慢速互联网连接的同时,上述哪种方法是企业应用程序的最佳方法


文件大小

我的第一点是,在处理企业级应用程序时,以兆字节为单位的实际 CSS 总量稍微不那么重要,即使对于缓慢的互联网连接也是如此。重要的是,您加载到刚刚第一次点击每次点击付费广告的潜在转化的空缓存中的页面应尽可能紧凑,但对于用户正在付费并打算付费的应用程序来说投入时间和精力,在每个版本中启动缓存,即使使用一兆字节的 CSS 也不是问题。您可以最后在登录页面上加载所有内容,以便在他们输入凭据时对所有内容进行排序。

此外,您将有时间研究一些其他技术,例如首先在其自己的优化文件中加载关键的“首屏”CSS;并拆分 css 文件,以便在第一个页面视图上加载常见内容,但在访问时按页面加载任何特定于页面的内容(郑重声明,这对于上述 PPC 目标非常有用)。

CCS 技巧更详细here https://css-tricks.com/authoring-critical-fold-css/ and here https://css-tricks.com/responsive-web-above-the-fold/.

复杂

企业云应用更大的考虑因素之一是CSS的可维护性。您可能会有一个开发团队和一个复杂的用户界面。如果对 CSS 方法做出错误的决定,这些事情很快就会变成维护噩梦。

如果用户可以在 0.1 秒以内加载页面,那一切都很好,但是如果您需要 30 分钟以上才能进行每个简单的 css 编辑,那么您就有麻烦了。

我的推荐

你想要两者的结合。你应该努力使用语义、上下文无关的 CSS 选择器为了达到最大的可重用性(和较小的文件大小)和最大的可维护性。这允许有效的文件大小管理和有效的、可扩展的开发。

例如:


.blue-box

.header-login-box

.contact-form-submit .green-button

不好:不符合语义,或者过于特定于上下文。我假设.blah从“对每个元素执行此操作”这句话来看,几乎都属于这一类。


.login-box

更好:更容易重用、语义化,但仍然过于上下文化


.box--highlighted

.button

.button--standout

更好的是:由于与页面上下文完全解耦,因此真正可重用,但语义仍然清晰,使其更易于维护。


通过最后的示例,您可以将应用程序 UI 设计分解为模块,这些模块可以在需要的地方进行定义和重用。可以想象,每个 HTML 元素可能会使用多个元素,但不会有 10 个。

使用实用程序类也可以,例如.pull-left事实上,CSS Wizardry 的 Harry Roberts 是一位成功的顾问,他在野外为真正的客户做了这些事情推荐它 http://csswizardry.com/2015/06/contextual-styling-ui-components-nesting-and-implementation-detail/.

进一步调查的三个途径

目前有三种可扩展 CSS 架构的组织/命名策略试图解决这个问题,您可能需要更详细地了解它们:

BEM: docs https://en.bem.info/ 介绍性文章 http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

OOCSS: docs https://github.com/stubbornella/oocss/wiki 介绍性文章 http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

SMACSS: 文档和简介 https://smacss.com/

这三者都将有助于最大限度地提高可重用性并最大限度地减少文件大小,同时为您提供可遵循的规则,以保持事情的紧密性并帮助团队的新成员。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

企业云应用程序的 CSS 框架的最佳方法是什么? 的相关文章