我们可以为我们的元素(如.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目标可能非常好).
复杂
企业云应用程序的更大考虑之一是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架构的组织/命名策略来解决问题,您可能需要更详细地查看它们:
OOCSS:docs introductory article
SMACSS:docs and introduction
所有这三个将有助于最大限度地提高可重用性和最小化文件大小,同时为您提供遵守规则以保持紧密状态并帮助新成员.