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

前端之家收集整理的这篇文章主要介绍了html – 企业云应用程序的CSS框架的最佳方法是什么?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
有几种方法来对每个页面中的元素进行样式,在企业应用程序中,通常CSS框架大小增加约1 MB,而当您的用户使用缓慢的互联网连接时,您应该减少CSS框架大小.

我们可以为我们的元素(如.Blah)创建新的CSS,并在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技巧更详细地介绍了herehere.

复杂

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

如果您的用户可以以0.1秒的速度加载页面,那么这样做非常好,但是如果需要30分钟更多的时间来完成每个简单的css编辑,那么您就遇到了麻烦.

我的建议

你想要两者的组合.您应该争取语义,上下文免费的css选择器,以获得最大的可重用性(和低文件大小)和最大的可维护性.这允许有效的文件大小管理和有效的,可扩展的开发.

例如:

的.blue盒

.header登录

.contact-form-submit.绿色按钮

坏:不是语义,或者是具体上下文.我假设.blah几乎属于这个类别,用“为每个元素做这个”这个短语来判断.

的.login盒

更好:更容易重用,语义,但仍然是语境

.Box的 – 突出

.button

.button – 突出

更好的是:真正重新使用,因为完全脱离页面上下文,但仍然清晰的语义,使其更容易维护.

通过最终的例子,您将应用程序UI设计分解为需要定义和重新使用的模块.可以想象,您可以使用多个HTML元素,但不会有十个.

使用实用程序类也是可以的,例如实际上是.pull-left,Harry Roberts在CSS Wizardry,一个成功的顾问,他们在野外为真实的客户端做了这个事情recommends it.

另外三个调查渠道

目前有三种针对可扩展css架构的组织/命名策略来解决问题,您可能需要更详细地查看它们:

BEM:docs introductory article

OOCSS:docs introductory article

SMACSS:docs and introduction

所有这三个将有助于最大限度地提高可重用性和最小化文件大小,同时为您提供遵守规则以保持紧密状态并帮助新成员.

猜你在找的HTML相关文章