什么是最好的 CSS 框架，它们是否值得付出努力？

What is the best CSS Framework and are they worth the effort?

提问by Martin Clarke

Reading on another forum I've came across the world of CSS Frameworks. The one I've been specifically looking at is BluePrint. I was wondering if anyone else had come across CSS frameworks, suggest which is the best and if they are worth the effort?

在另一个论坛上阅读我遇到了 CSS 框架的世界。我一直特别关注的是BluePrint。我想知道是否还有其他人遇到过 CSS 框架，建议哪个是最好的，以及它们是否值得付出努力？

回答by bobince

CSS 'frameworks' are completely missing the point.

CSS“框架”完全没有抓住重点。

CSS is not like JavaScript, where you can include a base library/framework and then call functions and objects from it to do higher-level work. All a CSS framework can give you is declarative rules: some default browser-rule-reset stuff, some class styles to be forced to author your page to, and layout rules using 'float' and 'clear'. You can write that in a few lines of CSS yourself rather than pulling in the bloat of a hundred framework rules.

CSS 不像 JavaScript，您可以在其中包含一个基础库/框架，然后从中调用函数和对象来完成更高级别的工作。CSS 框架所能提供的只是声明性规则：一些默认的浏览器规则重置内容，一些强制创作页面的类样式，以及使用“浮动”和“清除”的布局规则。你可以自己用几行 CSS 来编写它，而不是在一百条框架规则的膨胀中。

The 'grid layout' stuff in particular goes back to the bad old days of mixing your presentation into your markup. 'div class="span-24"' is no better than a table, you'll have to go back in there and change the markup to affect the layout. And all the frameworks I've seen are based around fixed-pixel floated boxes, making it impossible to create a liquid layout accessible on a wide range of window sizes.

特别是“网格布局”的东西可以追溯到将您的演示文稿混合到您的标记中的糟糕过去。'div class="span-24"' 并不比表格好，您必须回到那里并更改标记以影响布局。我见过的所有框架都基于固定像素浮动框，因此无法创建可在各种窗口大小上访问的液体布局。

It's backwards authoring, of use only for someone too scared to write a CSS rule.

这是向后创作，仅适用于害怕编写 CSS 规则的人。

回答by Edward Z. Yang

So, nobody's responded to this question yet (although I've seen a few upvotes), soI am going to at least attempt to tackle the second question in this prompt.

所以，还没有人回答这个问题（虽然我看到了一些赞成票），所以我将至少尝试解决此提示中的第二个问题。

CSS Frameworks are great; like any other framework, they reduce development time and let you get working immediately on site-specific design and CSS. They think about hard decisions so you don't have to.

CSS 框架很棒；与任何其他框架一样，它们减少了开发时间，让您可以立即开始处理特定于站点的设计和 CSS。他们会考虑艰难的决定，因此您不必这样做。

Unfortunately, there are two downsides to using a framework (in general):

不幸的是，使用框架有两个缺点（一般来说）：

1. The framework dictates the overall structure and mechanics of your CSS code. Now, I'm not talking about a CSS reset (these are useful in their own right, but they are not true frameworks); I'm talking about an honest to good framework, that has already made the decisions about what semantic tags you are going to be using in your document, etc. As such, you are made dependent on the framework, and when there is a bug in the framework, you will most commonly have to fix it yourself.

2. Frameworks are not an excuse for being oblivious to cross-browser/advanced CSS issues. You will invariably run into them, just as you would working with a PHP or JavaScript framework. And you need to know how to deal with them. There is a common saying that you should write your own framework first, before using someone else's.

1. 该框架决定了 CSS 代码的整体结构和机制。现在，我不是在谈论 CSS 重置（这些本身很有用，但它们不是真正的框架）；我说的是一个诚实到好的框架，它已经决定了您将在文档中使用哪些语义标签等。因此，您依赖于该框架，以及何时出现错误在框架中，您通常必须自己修复它。

2. 框架不是忽略跨浏览器/高级 CSS 问题的借口。您总会遇到它们，就像您使用 PHP 或 JavaScript 框架一样。你需要知道如何处理它们。有一句俗话说，你应该先写你自己的框架，然后再使用别人的。

Taking a quick peek at Blueprint, I would not really call it a framework; maybe a reset with a few extra goodies on top.

快速浏览一下 Blueprint，我不会真正将其称为框架。也许是重置，上面有一些额外的好东西。

回答by Ryan Doherty

I've looked at BluePrint and a few others and the only CSS 'framework' I'd recommend is YUI Grids

我看过 BluePrint 和其他一些，我推荐的唯一 CSS“框架”是YUI Grids

Pros:

优点：

• Written by one of the best frontend engineers out there (IMO) (Nate Koechley)
• Very small. 4KB
• Very flexible (1000 different layouts)
• Supports fluid-width (100%) layouts as well as preset fixed-width layouts at 750px, 950px, and 974px, and the ability to easily customize to any number.
• Supports easy customization of the width for fixed-width layouts.
• Template columns are source-order independent, so you can put your most important content first in the markup layer for improved accessibility and search engine optimization (SEO).
• Self-clearing footer. No matter which column is longer, the footer stays at the bottom.
• Layouts less than 100% are automatically centered.
• Somewhat semantic classnames (better than top, left, right, etc)

• 由最好的前端工程师之一 (IMO) (Nate Koechley) 撰写
• 很小。4KB
• 非常灵活（1000 种不同的布局）
• 支持流体宽度 (100%) 布局以及 750px、950px 和 974px 的预设固定宽度布局，并且能够轻松自定义为任何数字。
• 支持轻松自定义固定宽度布局的宽度。
• 模板列与源顺序无关，因此您可以将最重要的内容放在标记层中，以提高可访问性和搜索引擎优化 (SEO)。
• 自清页脚。无论哪一列更长，页脚都停留在底部。
• 小于 100% 的布局会自动居中。
• 有点语义的类名（优于顶部、左侧、右侧等）

Cons:

缺点：

• Lots of extra markup compared to hand-written HTML and CSS
• Takes some learning to figure out how to do complex layouts

• 与手写 HTML 和 CSS 相比，有很多额外的标记
• 需要一些学习才能弄清楚如何进行复杂的布局

As other have posted, there are no real 'frameworks' for CSS. Resetstylesheets help a lot with layout too. I usually stick with a reset stylesheet and go from there. But if you don't have a lot of CSS experience YUI Grids could save you some time.

正如其他人发布的那样，CSS 没有真正的“框架”。重置样式表对布局也有很大帮助。我通常坚持使用重置样式表并从那里开始。但是如果您没有很多 CSS 经验，YUI Grids 可以为您节省一些时间。

回答by Dustin

Compassis an actual CSS framework in the sense that it gives you not only templates (both YUI and blueprint), but also reusable constructs and higher-level declarations while still giving you familiar CSS syntax.

Compass是一个实际的 CSS 框架，它不仅为您提供模板（YUI 和蓝图），而且还提供可重用的构造和更高级别的声明，同时仍然为您提供熟悉的 CSS 语法。

回答by Andy Ford

Take the time to study and understand (really understand!) a few css frameworks such as BluePrint and YUI, and css resets like Eric Meyer's. Then, take the time to put together your own reset and/or framework based on your work methods and the kind of sites you build.

花点时间研究了解（真的懂！）BluePrint、YUI等几个css框架，还有像Eric Meyer的css reset。然后，根据您的工作方法和您构建的网站类型，花时间整理您自己的重置和/或框架。

Personally, I use most of the Eric Meyer reset with some classes and resets of my own, plus a few ideas from BluePrint and YUI.

就我个人而言，我使用 Eric Meyer 重置的大部分内容以及我自己的一些类和重置，以及来自 BluePrint 和 YUI 的一些想法。

I recently watched Eric Meyer give a presentation on CSS Frameworks in which he asked the question: "so which one is the right one for me?" He then answered the question by showing a blank slide. His point was, that there are certainly some useful concepts built into most resets and frameworks, but the one that will suit you the best is the one that you write for yourself (it's worth the effort).

我最近观看了 Eric Meyer 关于 CSS Frameworks 的演讲，他在演讲中提出了一个问题：“那么哪个对我来说是正确的？” 然后他通过展示一张空白幻灯片回答了这个问题。他的观点是，大多数重置和框架中肯定都内置了一些有用的概念，但最适合您的是您为自己编写的概念（值得付出努力）。

回答by Sam Murray-Sutton

Why use css 'frameworks'?

为什么使用css“框架”？

• If you are pressured for time.

• If you do not know css, and don't know someone who can write it for you.

• If you are not overly precious about standards etc.

• 如果时间紧迫。

• 如果您不了解 css，并且不认识可以为您编写它的人。

• 如果您对标准等不太重视。

I know programmers who have been really happy to use blueprint or 960, as it allows them to put together a layout on their own, without turning to a front-end developer. This is ideal for personal projects, or startups with limited resources.

我认识一些程序员，他们非常乐于使用 blueprint 或 960，因为它允许他们自己组装布局，而无需求助于前端开发人员。这是个人项目或资源有限的初创公司的理想选择。

If you have decent knowledge of CSS already, then presumably you have a decent library of stock layouts already, so you clearly won't need a framework.

如果您已经对 CSS 有了不错的了解，那么大概您已经拥有了一个不错的库存布局库，因此您显然不需要框架。

However, if you're a beginner and just need to get something up and running, then you might turn to a framework, as it makes basic layout much simpler, and tackling browser compatibility also.

但是，如果您是初学者并且只需要启动和运行一些东西，那么您可能会转向框架，因为它使基本布局更简单，并且还解决了浏览器兼容性问题。

Having said all that, many frameworks out of the box do make use of some horrible class names etc. I know of some websites that have taken a framework as a starting point and then customised it with their own class and id tags. But clearly there's a bit of work involved in that rewrite too. Using something like Compass, as mentioned above, does help to get around that.

尽管如此，许多开箱即用的框架确实使用了一些可怕的类名等。我知道一些网站将框架作为起点，然后使用自己的类和 id 标签对其进行自定义。但很明显，重写也涉及一些工作。使用像上面提到的 Compass 之类的东西确实有助于解决这个问题。

So, CSS frameworks - they can save you time, at the cost of semantics. They might also hurt your knowledge of CSS, but that is more up to how much you invest in learning the subject in general. Whether you make use of them is up to you.

所以，CSS 框架 - 它们可以以语义为代价为您节省时间。它们也可能会损害您对 CSS 的了解，但这更取决于您总体上在学习该主题上的投入程度。是否使用它们取决于您。

回答by Rimian

You'd have to ask yourself how effective the available frameworks are at solving your problems. Do they meet your requirements?

您必须问问自己可用的框架在解决您的问题方面的效果如何。它们符合您的要求吗？

By using a framework, you can set some rules or details at the pixel level and devote the rest of your time to implementing and producing. It's a massive productivity boost. If you find yourself spending time adjusting things by a few pixels late in the project (micro managing the design), it's a sign that a framework can be useful.

通过使用框架，您可以在像素级别设置一些规则或细节，并将其余时间用于实现和生产。这是一个巨大的生产力提升。如果您发现自己在项目后期花费时间调整一些像素（微观管理设计），则表明框架很有用。

Tip #17 in The Pragmatic Programmersays: "Program close to the problem domain". Using a layer of abstraction can get you closer to solving the real problems of layout. For example: you might be able to concentrate of enhancing the user experience with the extra time you have rather than minor adjustments of pixels.

The Pragmatic Programmer中的提示 #17说：“编程接近问题域”。使用抽象层可以让你更接近解决布局的真正问题。例如：您可能能够通过额外的时间专注于增强用户体验，而不是对像素进行微小的调整。

This is not to say you must sacrifice quality for quantity. It's about efficiency.

这并不是说你必须为了数量而牺牲质量。这是关于效率的。

On a recent project, I made my own framework because we had very limited resources and the popular frameworks didn't do what I wanted. Then, I set up the design team's PSDs to snap to the same grid I deployed.

在最近的一个项目中，我制作了自己的框架，因为我们的资源非常有限，而且流行的框架并没有达到我想要的效果。然后，我将设计团队的 PSD 设置为捕捉到我部署的相同网格。

A framework doesn't have to be any particular implementation of CSS. It doesn't have to be something bloated you downloaded from the interweb or something implementing outdated ideas. It's just a technique for getting a job done. I wouldn't be surprised if some coders already have their own frameworks and don't even know it. In fact, if you consider the DOM as a set of default elements you extend with CSS, then that's a framework by definition.

框架不必是 CSS 的任何特定实现。它不一定是你从互联网上下载的臃肿的东西或实现过时想法的东西。这只是完成工作的一种技巧。如果一些编码人员已经拥有自己的框架并且甚至不知道它，我不会感到惊讶。事实上，如果您将 DOM 视为您使用 CSS 扩展的一组默认元素，那么这就是一个定义框架。

回答by pistacchio

i haven't used it yes, but i think emasticmay be a good alternative worth a check. it it is similar to blueprint in scope, but also supports elastic layouts (hence the name) and you can specify values in px, em or %, and even mix them.

我没有用过它是的，但我认为emastic可能是一个值得一试的好选择。它在范围上类似于蓝图，但也支持弹性布局（因此得名），您可以指定 px、em 或 % 中的值，甚至可以混合它们。

回答by Domenic

I actually spent a good portion of the last 24 hours investigating this on my own, heh. My conclusion was that a nice reset (I used YUI Reset), and maybe something else to set baseline stuff (YUI fontswas worthwhile in my case; maybe the "extra goodies" of BluePrint would be in yours) is a good idea. But, a "framework"---which is generally something like YUI grids---is too restrictive, forcing you to use their class names, ids, etc. and rarely fitting into your site like hand-made CSS would.

实际上，过去 24 小时的大部分时间里，我自己都在研究这个问题，呵呵。我的结论是，一个不错的重置（我使用了YUI Reset），也许还有其他设置基线的东西（在我的情况下YUI 字体是值得的；也许 BluePrint 的“额外的好东西”会在你身上）是一个好主意。但是，“框架”——通常类似于YUI 网格——过于严格，迫使您使用它们的类名、ID 等，并且很少像手工制作的 CSS 那样适合您的站点。

So in short: resets seem pretty nice; it's good to eliminate all the variation in e.g. margin-vs-padding for lists, or paragraph spacing, or whatever. But that's as far as I would take it.

简而言之：重置看起来很不错；最好消除所有变化，例如列表的边距与填充，或段落间距，或其他。但这就是我所能接受的。

回答by aaandre

Compass I think is amazing. Make sure you see the screencast.

指南针我觉得很神奇。确保您看到截屏视频。

I am using 960.gsfor a few websites and find it very simple and easy and worth the effort. Saves me a lot of work on layout. Make sure to check the custom CSS generator which goes away with the fixed width of 960 pixels.

我在一些网站上使用960.gs，发现它非常简单易用，值得付出努力。为我节省了大量的布局工作。确保检查自定义 CSS 生成器，它以 960 像素的固定宽度消失。