Question

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

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

Answer 1

文件大小

我的第一点是，在处理企业级应用程序时，以兆字节为单位测量的实际css总量稍微不那么重要，即使对于慢速的互联网连接也是如此。非常重要的是，您加载到可能转化的空缓存中的网页，只是第一次点击您的每次点击付费广告，就像您可能制作它们一样紧，但对于用户付费的应用来说因为并打算投入时间和精力，每次发布时都会启动缓存，即使使用兆字节的css也不是问题。您可以在登录页面上最后加载它，以便在他们提交凭据时对它们进行全部排序。

此外，您还有时间研究其他一些技术，例如在首屏加载关键字＆＃39;首先使用css自己的优化文件;然后拆分css文件，以便在第一页视图上加载公共内容，但每页都会加载任何页面特定内容，因为它已被访问（对于记录，这对于前面提到的PPC目标非常有用））。

CCS诀窍详细介绍here和here。

<强>复杂性

企业云应用程序的一个重要考虑因素是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，他是一位成功的顾问，为真正的客户做了这件事recommends it。

另外三个调查途径

目前有三种可扩展的css架构的组织/命名策略试图解决这个问题，你可能想要更详细地看一下它们：

BEM： docs introductory article

OOCSS： docs introductory article

SMACSS： docs and introduction

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

Answer 2

我认为正确的答案是：“找到一个快乐且可维护的In-Betweener”。

模块化方法

按模块命名CSS类可能非常有价值。你可以将父CSS放到一个元素上，让所有子元素DOM元素尊重你的CSS结构，你就可以拥有一个非常模块化和强大的CSS框架。但是，当你难过的时候，它可以开始膨胀CSS文件，因为命名空间CSS类将应用于所有子元素。

“use-css-properties-as-css-classes”方法

您可能会尝试使用此方法，因为它为您的页面元素提供了极大的灵活性。问题是可重用性。如果您定义特定组件应始终将其标题设置为“粗体”。您是否希望每次需要使用此组件时都应用“text-bold”类？这可能成为可维护性的噩梦，我只会将它用于例外。

模块化与变化方法

我最喜欢的一个：在常见的可重用UI组件中分解您的应用。还要考虑这些组件如何变化：大小调整，颜色或可选的子元素。然后将CSS属性应用为异常的类。

您的CSS代码将生活在以下结构中：

大多数由模块/ UI组件（CSS命名空间）封装的CSS工作
您的UI组件的一些或几个CSS变体
异常和特定于页面的变体的类似属性的CSS类

<强>提示

从现有的CSS框架（如Twitter Bootstrap）下载源代码，研究如何在不同的UI组件中重用CSS。
考虑使用预编译的CSS，如LESS或SASS，因为您可以使用函数和变量。
为组件名称使用短css名称（因此它们不会膨胀您的最终CSS文件
分组，缩小和压缩您的css文件。

<强>实施例

CSS课程

/* Panel Component */
.panel {
    width: 100%;
}
.panel-content {
    padding: 10px 20px;
}

/* Panel variations*/
.panel-success {
    background-color: #3F3;
}
.panel-with-icon .panel-content {
    padding-left: 50px;
}

/* Exceptions (Helpers) */
.pull-right {
    float: right;
}
.margin-top-20 {
    margin-top: 20px;
}

HTML使用

<div class="panel">
    <div class="panel-content">
        Simple panel
    </div>
</div>

<div class="panel panel-with-icon">
    <div class="icon">
        my great icon
    </div>
    <div class="panel-content">
        Panel with icon
    </div>
</div>

<div class="panel panel-success margin-top-20">
    <div class="panel-content">
        My successful panel with page specific tweaks
    </div>
</div>

我希望它可以帮到你。

Answer 3

我总是采用第二种方法，因为：

1. 维护更容易，您永远不知道何时编辑您的网页。例如，如果你给你的元素一个my-color类并且你想在一段时间后改变它，你需要做的就是去你的css文件并改变my-color颜色，想象一下时间你节省，当然时间意味着金钱。

2.您不会重复自己的风格，这会导致更少的.css文件大小，从而成为一个更快的网站。

3.您可以制作一次.css结构，然后在每个项目中重复使用。您只需要更改样式。例如，您可以在具有不同样式的每个项目中使用.my-color。而不是每次都从头开始。

缺点是你有一个更大的.html页面，但通常浏览器可以填充你的页面和

在许多情况下，样式表性能的增益量将大大超过标记性能的损失

引自http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

这种方法被称为 OOCSS = 面向对象的级联样式表，它还没有被认为是最佳实践，但它正在不断发展。< / p>

您可以在这里阅读更多内容

http://oocss.org/

http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/

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

3 个答案: