什么是企业云应用程序的CSS框架的最佳方法是什么？ [英] What is the best Approach for CSS framework of an Enterprise Cloud application?
问题描述
有几种方法可以为每个页面中的元素设置样式，在企业应用程序中，通常 CSS Framework 大小增加了大约1 MB，当用户使用缓慢的互联网连接时，应该减少CSS框架
我们可以为像 .Blah 这样的元素创建新的CSS，并在css框架中为其设置值，并为每个引起增加的元素css框架的大小，但是更干净的页面
< div id =blahclass =blah> / div>
我们也可以在每个视图中使用我们的css框架实用程序元素保持css框架的大小，但是是非干净的页面
< div id =blahclass =margin10 padding20 bg-color-red fg-color-white text-bold else>< / div>
上述方法是企业应用程序的最佳方法，用户正在使用缓慢的互联网连接
文件大小
我的第一点是，当处理企业级应用程序时，以兆字节衡量的css的实际总量稍微不重要，即使对于缓慢的互联网连接。重要的是，您首次点击每次点击费用广告的潜在转化次数的缓存中的网页会尽可能紧凑，但是对于用户付费且正在计划的应用程序投入他们的时间和精力，每个版本启动缓存，即使有一个兆字节的css也不是一个问题。你可以在登录页面上最后加载它，所以它们都会排序，而他们把他们的凭据。
此外，你会有时间调查一些其他的技术，例如加载关键'在折叠'CSS之前它自己的，优化的文件首先;并且将css文件向上分割，以便在第一页面视图上加载公共内容，但是当它访问时（对于该记录，这对于上述PPC目标可以是非常好的）每页加载任何页面特定内容。 p>
复杂性
企业云应用程序的一个更大的考虑因素是css的可维护性。你可能会有一个开发团队和一个复杂的用户界面。如果对css的方法做出错误的决定，这些东西很快就会变成维护噩梦。
如果用户可以在0.1秒内加载页面，
我的建议您想要两者的组合。 您应该争取语义，无上下文的css选择器，以达到最大的可用性（和低文件大小）和最大的可维护性。这允许有效的文件大小管理和有效的，可扩展的开发。
例如：
.blue-box
.header-login-框
.contact-form-submit .green按钮
坏：不是语义，或者是上下文相关的。我假设 .blah 几乎属于这个类别，用为每个元素做这个这个短语来判断。
.login-box
.box - 高亮显示
.button
.button - standout
甚至更好：真正可重用，因为与页面上下文完全解耦，
在最后的例子中，你将应用程序UI设计分解成模块，定义和重用于任何需要的地方。可以想象，你可以使用多个HTML元素，但你不会有十个。
也可以使用实用程序类，例如 .pull-left 实际上，CSS Wizardry的Harry Roberts是一个成功的顾问，他为真实客户在野外做这个事情推荐它。
目前有三种针对可伸缩css架构的组织/命名策略，尝试解决这个问题，您可能需要更详细地查看它们： / p>
OOCSS： 文档
SMACSS： 文档和简介
这三个都有助于最大限度地提高可重用性和最小化文件大小，让你遵守规则，保持紧张，并帮助团队的新成员。
There are several ways to style the elements in each page, in Enterprise applications usually the CSS Framework size increased about 1 MB, and when your users are using slow internet connection, you should decrease css framework size.
we can create new CSS for our element like .Blah and value it in css framework and do this for each element which cause increase size of css framework, but a cleaner page
<div id="blah" class="blah"></div>
we can also use our css framework utilities in each view to format each element to keep size of css framework, but a non-clean page
<div id="blah" class="margin10 padding20 bg-color-red fg-color-white text-bold else"></div>
which of above approach is the best approach for an Enterprise application, while you ensure that a majority of your users are using slow internet connection
File sizes
My first point would be that when dealing with an enterprise level application the actual total quantity of css when measured in megabytes is slightly less important, even for slow internet connections. It's important that the pages you load into an empty cache of a potential conversion that just clicked your pay per click ad for the first time are as tight as you can possibly make them, but for an app that a user is paying for and is intending to invest their time and effort, priming a cache every release, even with a megabyte of css is less of a problem. You could load it all last on the login page so it's all sorted while they put their credentials in.
Furthermore, you'll have the time to investigate some other techniques, such as loading critical 'above the fold' css in it's own, optimised file first; and splitting the css files up so that the common stuff is loaded on the first page view but any page specific stuff is loaded per page, as it's visited (for the record, this can be very good for the aforementioned PPC targets).
CCS Tricks goes into more detail here and here.
Complexity
One of the bigger considerations of enterprise cloud applications is the maintainability of the css. You're probably going to have a team of developers and a complex user interface. These things can quickly turn into a maintenance nightmare if the wrong decisions are made concerning the approach to css.
It's all very well if you users can load a page in 0.1s less, but if it takes you 30mins more to make every simple css edit then you're in trouble.
My recommendation
You want a combination of both. You should strive for semantic, context free css selectors in order to hit maximum re-usability (and low file size) and maximum maintainability. This allows for effective file size management and effective, scalable development.
For example:
.blue-box
.header-login-box
.contact-form-submit .green-button
bad: not semantic, or too context specific. I'm assuming that .blah pretty much falls into this category, judging by the phrase 'do this for each element'.
.login-box
better: easier to re-use, semantic, but still too contextual
.box--highlighted
.button
.button--standout
even better: really re-usable because of complete decoupling from page context, but still clearly semantic, making it easier to maintain.
With the final examples you break your app UI designs down into modules which are defined and re-used wherever they are needed. It's conceivable that you may use more than one per HTML element, but you won't have ten.
It's also OK to use utility classes, such as .pull-left in fact, Harry Roberts at CSS Wizardry, a successful consultant whose done this stuff in the wild for real clients recommends it.
Three further avenues of investigation
There are currently three organisational / naming strategies for scalable css architecture that try to tackle the problem, you might want to look at them in more detail:
BEM: docs introductory article
OOCSS: docs introductory article
SMACSS: docs and introduction
All three will help maximise re-usability and minimise file sizes while giving you rules to follow to keep things tight and help with new members of the team.
这篇关于什么是企业云应用程序的CSS框架的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
