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

Question

有几种方法可以在每个页面中设置元素的样式,在企业应用程序中,CSS Framework大小通常会增加大约1 MB,当用户使用慢速Internet连接时,应该减少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>

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

Answer 1

文件大小

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

此外,您将有时间研究其他一些技术,例如首先在其自己的优化文件中加载关键的'首屏'css; 然后将css文件拆分,以便在第一页面视图上加载公共内容,但是每页都会加载任何页面特定内容,因为它已被访问(对于记录,这对于上述PPC目标非常有用).

CCS技巧在这里和这里详细介绍.

复杂

企业云应用程序的一个重要考虑因素是css的可维护性.您可能会拥有一个开发人员团队和一个复杂的用户界面.如果做出关于css方法的错误决定,这些事情很快就会变成维护噩梦.

如果用户可以加载0.1秒以内的页面,那就非常好了,但是如果每次编辑简单的css需要30分钟,那么你就麻烦了.

我的推荐

你想要两者的结合.您应该努力寻找语义,无上下文的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是一位成功的顾问,他在野外为真实客户推荐了这些东西.

三个进一步的调查途径

目前有三种可扩展的css体系结构的组织/命名策略试图解决问题,您可能希望更详细地查看它们:

BEM: docs 介绍性文章

OOCSS: docs 介绍性文章

SMACSS: 文档和介绍

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