CSS 企业云应用程序框架的最佳方法是什么？
What is the best Approach for CSS framework of an Enterprise Cloud application?
有几种方法可以为每个页面中的元素设置样式，在企业应用程序中通常 CSS Framework 大小会增加大约 1 MB，并且当您的用户正在使用互联网连接速度慢，您应该减小 css 框架大小。
我们可以为我们的元素创建新的 CSS，例如 .Blah 并在 css 框架中对其进行赋值，并对每个导致尺寸增加的元素执行此操作css 框架，但页面更清晰
<div id="blah" class="blah"></div>
我们还可以在每个视图中使用我们的 css 框架 utilities 来格式化每个元素以保持 css 框架的大小，但不干净第
页
<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>
以上哪种方法是企业应用程序的最佳方法，同时您确保大多数用户使用的是慢速互联网连接
我总是采用第二种方法，因为：
1.It 更易于 维护，您永远不知道何时会编辑您的页面。因此，例如，如果你给你的元素一个 my-color 的 class 并且你想在一段时间后更改它，你需要做的就是转到你的 css 文件并更改 my-colorcolor，想象一下你节省的时间，当然时间就是金钱。
2.You 不要重复您的风格，这会导致 文件大小更小 css ，从而使网站更快。
3.You 可以使您的 .css 结构一次，然后 在每个项目中重复使用。您只需更改样式即可。例如，您可以在每个具有不同样式的项目中使用 .my-color。而不是每次都从头开始。
缺点 是你会有更大的 .html 页面，但浏览器通常会兑现你的页面并且
in many cases the amount of loss in markup performance will be greatly surpassed by the amount of gain in stylesheet performance
引自http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
这种方法称为 OOCSS = 面向对象的级联样式 Sheet，它还不是最佳实践，但它正在发展。
您可以在此处阅读更多内容
http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
我认为正确答案是："Find a happy and maintainable In-Betweener"。
模块化方法
按模块为您的 CSS class 命名空间可能非常有价值。您可以将 parent CSS 放到一个元素中，让所有 children DOM 元素都符合您的 CSS 结构，您最终可以拥有一个非常模块化和强大的 CSS 框架。但是，正如你伤心的那样，它可能会开始使你的 CSS 文件膨胀，因为命名空间 CSS classes 将应用于所有 child 元素。
"use-css-properties-as-css-classes" 方法
您可能会想使用这种方法，因为它为页面中的元素提供了极大的灵活性。问题是re-usability。如果您定义特定组件应始终将其标题设置为 "bold"。您希望每次需要使用此组件时都应用 class "text-bold" 吗？这可能会成为可维护性的噩梦，我只会在例外情况下使用它。0
modular-with-variations 方法
我最喜欢的一个：将您的应用分解为常见的可重用 UI 组件。
还要考虑这些组件可能如何变化：大小、颜色或可选的 child 元素。然后将 CSS 属性应用为 classes 作为例外。
您的 CSS 代码将在以下结构下运行：
- 大部分 CSS 工作由模块/UI 组件封装（CSS 命名空间）
- UI 个组件的一些或几个 CSS 变体
- Property-like CSS class 例外和 page-specific 变化
小贴士
- 从现有 CSS 框架（例如 Twitter Bootstrap）下载源代码并研究它们如何在不同的 UI 组件中重用 CSS。
- 考虑使用 pre-compiled CSS，例如 LESS 或 SASS，因为您可以使用函数和变量。
- 为组件名称使用简短的 css 名称（因此它们不会使您的最终 CSS 文件膨胀
- 对您的 css 个文件进行分组、压缩和 gzip。
例子
CSS classes
/* 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>
希望对你有所帮助
文件大小
我的第一点是，在处理企业级应用程序时，css 的实际总量（以兆字节为单位）稍微不那么重要，即使对于慢速互联网连接也是如此。重要的是，您加载到第一次点击您的每次点击付费广告的潜在转化的空缓存中的页面尽可能紧凑，但对于用户正在付费并打算使用的应用程序而言投入他们的时间和精力，在每次发布时启动缓存，即使是 css 兆字节也不成问题。您可以在登录页面最后加载所有内容，以便在他们输入凭据时对所有内容进行排序。
此外，您将有时间研究一些其他技术，例如首先将关键 'above the fold' css 加载到它自己的优化文件中；并拆分 css 文件，以便在第一个页面视图中加载常见的内容，但在访问时每页加载任何页面特定的内容（为了记录，这对于上述 PPC 目标非常有用).
复杂度
企业云应用程序的更大考虑因素之一是 css 的可维护性。您可能会有一个开发团队和一个复杂的用户界面。如果对 css.
的方法做出错误的决定，这些事情很快就会变成维护的噩梦
如果您的用户可以在 0.1 秒内加载一个页面，这一切都很好，但是如果您需要多花 30 分钟来完成每个简单的 css 编辑，那么您就有麻烦了。
我的推荐
你想要两者的结合。 您应该争取语义的、上下文无关的 css 选择器 以达到最大的可重用性（和较小的文件大小）和最大的可维护性。这允许有效的文件大小管理和有效的、可扩展的开发。
例如：
.blue-box
.header-login-box
.contact-form-submit .green-button
不好：没有语义，或者过于具体。我假设 .blah 几乎属于这一类，根据短语 'do this for each element'.
判断
.login-box
更好：更容易重用，语义化，但仍然过于上下文
.box--highlighted
.button
.button--standout
更好：由于与页面上下文完全解耦，真正可重用，但语义仍然清晰，更易于维护。
在最后的示例中，您将应用 UI 设计分解为模块，这些模块在需要的地方定义和重用。可以想象每个 HTML 元素可以使用多个，但不会有十个。
也可以使用实用程序 类，例如 .pull-left 事实上，Harry Roberts 在 CSS Wizardry，一位成功的顾问，他在野外为真正的客户做了这些事情recommends it.
三个进一步的调查途径
目前有三种针对可扩展 css 架构的组织/命名策略试图解决该问题，您可能需要更详细地了解它们：
BEM: docs introductory article
OOCSS: docs introductory article
SMACSS: docs and introduction
这三者都将有助于最大限度地提高可重用性并最大限度地减少文件大小，同时为您提供遵循规则以确保事情紧凑并帮助团队的新成员。
有几种方法可以为每个页面中的元素设置样式，在企业应用程序中通常 CSS Framework 大小会增加大约 1 MB，并且当您的用户正在使用互联网连接速度慢，您应该减小 css 框架大小。
我们可以为我们的元素创建新的 CSS，例如 .Blah 并在 css 框架中对其进行赋值，并对每个导致尺寸增加的元素执行此操作css 框架，但页面更清晰
<div id="blah" class="blah"></div>
我们还可以在每个视图中使用我们的 css 框架 utilities 来格式化每个元素以保持 css 框架的大小，但不干净第
页<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>
以上哪种方法是企业应用程序的最佳方法，同时您确保大多数用户使用的是慢速互联网连接
我总是采用第二种方法，因为：
1.It 更易于 维护，您永远不知道何时会编辑您的页面。因此，例如，如果你给你的元素一个 my-color 的 class 并且你想在一段时间后更改它，你需要做的就是转到你的 css 文件并更改 my-colorcolor，想象一下你节省的时间，当然时间就是金钱。
2.You 不要重复您的风格，这会导致 文件大小更小 css ，从而使网站更快。
3.You 可以使您的 .css 结构一次，然后 在每个项目中重复使用。您只需更改样式即可。例如，您可以在每个具有不同样式的项目中使用 .my-color。而不是每次都从头开始。
缺点 是你会有更大的 .html 页面，但浏览器通常会兑现你的页面并且
in many cases the amount of loss in markup performance will be greatly surpassed by the amount of gain in stylesheet performance
引自http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
这种方法称为 OOCSS = 面向对象的级联样式 Sheet，它还不是最佳实践，但它正在发展。
您可以在此处阅读更多内容
http://www.smashingmagazine.com/2011/12/12/an-introduction-to-object-oriented-css-oocss/
我认为正确答案是："Find a happy and maintainable In-Betweener"。
模块化方法
按模块为您的 CSS class 命名空间可能非常有价值。您可以将 parent CSS 放到一个元素中，让所有 children DOM 元素都符合您的 CSS 结构，您最终可以拥有一个非常模块化和强大的 CSS 框架。但是，正如你伤心的那样，它可能会开始使你的 CSS 文件膨胀，因为命名空间 CSS classes 将应用于所有 child 元素。
"use-css-properties-as-css-classes" 方法
您可能会想使用这种方法，因为它为页面中的元素提供了极大的灵活性。问题是re-usability。如果您定义特定组件应始终将其标题设置为 "bold"。您希望每次需要使用此组件时都应用 class "text-bold" 吗？这可能会成为可维护性的噩梦，我只会在例外情况下使用它。0
modular-with-variations 方法
我最喜欢的一个：将您的应用分解为常见的可重用 UI 组件。 还要考虑这些组件可能如何变化：大小、颜色或可选的 child 元素。然后将 CSS 属性应用为 classes 作为例外。
您的 CSS 代码将在以下结构下运行：
- 大部分 CSS 工作由模块/UI 组件封装（CSS 命名空间）
- UI 个组件的一些或几个 CSS 变体
- Property-like CSS class 例外和 page-specific 变化
小贴士
- 从现有 CSS 框架（例如 Twitter Bootstrap）下载源代码并研究它们如何在不同的 UI 组件中重用 CSS。
- 考虑使用 pre-compiled CSS，例如 LESS 或 SASS，因为您可以使用函数和变量。
- 为组件名称使用简短的 css 名称（因此它们不会使您的最终 CSS 文件膨胀
- 对您的 css 个文件进行分组、压缩和 gzip。
例子
CSS classes
/* 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>
希望对你有所帮助
文件大小
我的第一点是，在处理企业级应用程序时，css 的实际总量（以兆字节为单位）稍微不那么重要，即使对于慢速互联网连接也是如此。重要的是，您加载到第一次点击您的每次点击付费广告的潜在转化的空缓存中的页面尽可能紧凑，但对于用户正在付费并打算使用的应用程序而言投入他们的时间和精力，在每次发布时启动缓存，即使是 css 兆字节也不成问题。您可以在登录页面最后加载所有内容，以便在他们输入凭据时对所有内容进行排序。
此外，您将有时间研究一些其他技术，例如首先将关键 'above the fold' css 加载到它自己的优化文件中；并拆分 css 文件，以便在第一个页面视图中加载常见的内容，但在访问时每页加载任何页面特定的内容（为了记录，这对于上述 PPC 目标非常有用).
复杂度
企业云应用程序的更大考虑因素之一是 css 的可维护性。您可能会有一个开发团队和一个复杂的用户界面。如果对 css.
的方法做出错误的决定，这些事情很快就会变成维护的噩梦如果您的用户可以在 0.1 秒内加载一个页面，这一切都很好，但是如果您需要多花 30 分钟来完成每个简单的 css 编辑，那么您就有麻烦了。
我的推荐
你想要两者的结合。 您应该争取语义的、上下文无关的 css 选择器 以达到最大的可重用性（和较小的文件大小）和最大的可维护性。这允许有效的文件大小管理和有效的、可扩展的开发。
例如：
.blue-box
.header-login-box
.contact-form-submit .green-button
不好：没有语义，或者过于具体。我假设 .blah 几乎属于这一类，根据短语 'do this for each element'.
.login-box
更好：更容易重用，语义化，但仍然过于上下文
.box--highlighted
.button
.button--standout
更好：由于与页面上下文完全解耦，真正可重用，但语义仍然清晰，更易于维护。
在最后的示例中，您将应用 UI 设计分解为模块，这些模块在需要的地方定义和重用。可以想象每个 HTML 元素可以使用多个，但不会有十个。
也可以使用实用程序 类，例如 .pull-left 事实上，Harry Roberts 在 CSS Wizardry，一位成功的顾问，他在野外为真正的客户做了这些事情recommends it.
三个进一步的调查途径
目前有三种针对可扩展 css 架构的组织/命名策略试图解决该问题，您可能需要更详细地了解它们：
BEM: docs introductory article
OOCSS: docs introductory article
SMACSS: docs and introduction
这三者都将有助于最大限度地提高可重用性并最大限度地减少文件大小，同时为您提供遵循规则以确保事情紧凑并帮助团队的新成员。