blocks|key|1102070|text|首先，不要自动假设CSS框架是必要的，甚至是可取的。这取决于你在做什么，以及你对标记%2B+CSS的擅长程度，这可能不值得你这么做。我在网上看到的争论，比如这个criticism+of+the+YUI+Grids+framework，Wikipedia+article仅仅触及了它的皮毛。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|1102071|如果您已经决定CSS框架适合您，那么您需要确定它将为您解决哪些问题。一旦你有了这个列表，你就可以开始比较不同的列表，看看它们是如何解决你的问题的。|1102072|最后，有许多次要因素可能会改变您的特定应用程序的平衡。已经在网站上使用YUI了吗？然后，Reset、Base、Fonts和Grids组合可能会出现凹凸等情况。|1102073|我最常看到的两个引用是YUI和BluePrintCSS+(这里有一个comparison)。|1102074|更新:我还没有看到CSS框架显式解决的一件事是Setting+Type+on+the+Web+to+a+Baseline+Grid+(有关更多细节，请参阅此article+on+composing+to+a+vertical+rhythm+)。|1102075|entityMap|0|LINK|mutability|MUTABLE|url|http://www.elliotswan.com/2006/05/10/yui-grids-css-framework-considered-harmful/|1|http://en.wikipedia.org/wiki/CSS_framework|2|http://developer.yahoo.com/yui/reset/|3|http://developer.yahoo.com/yui/base/|4|http://developer.yahoo.com/yui/fonts/|5|http://developer.yahoo.com/yui/grids/|6|http://www.blueprintcss.org/|7|http://foohack.com/2007/08/blueprint-css-framework-vs-yui-grids/|8|http://www.alistapart.com/articles/settingtypeontheweb|9|http://24ways.org/2006/compose-to-a-vertical-rhythm^0|26|10|0|37|H|1|0|0|18|5|2|1E|4|3|1J|5|4|1P|5|5|0|F|C|6|Y|A|7|0|N|16|8|26|15|9|0^^$0|@$1|2|3|4|5|6|7|1B|8|@]|9|@$A|1C|B|1D|1|1E]|$A|1F|B|1G|1|1H]]|C|$]]|$1|D|3|E|5|6|7|1I|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|1J|8|@]|9|@$A|1K|B|1L|1|1M]|$A|1N|B|1O|1|1P]|$A|1Q|B|1R|1|1S]|$A|1T|B|1U|1|1V]]|C|$]]|$1|H|3|I|5|6|7|1W|8|@]|9|@$A|1X|B|1Y|1|1Z]|$A|20|B|21|1|22]]|C|$]]|$1|J|3|K|5|6|7|23|8|@]|9|@$A|24|B|25|1|26]|$A|27|B|28|1|29]]|C|$]]|$1|L|3|-4|5|6|7|2A|8|@]|9|@]|C|$]]]|M|$N|$5|O|P|Q|C|$R|S]]|T|$5|O|P|Q|C|$R|U]]|V|$5|O|P|Q|C|$R|W]]|X|$5|O|P|Q|C|$R|Y]]|Z|$5|O|P|Q|C|$R|10]]|11|$5|O|P|Q|C|$R|12]]|13|$5|O|P|Q|C|$R|14]]|15|$5|O|P|Q|C|$R|16]]|17|$5|O|P|Q|C|$R|18]]|19|$5|O|P|Q|C|$R|1A]]]]

<p>First, don't just automatically assume a CSS framework is necessary, or even desirable. Depending on what you're doing and how good you are at markup + CSS, it may not be worth it. The <a href="http://en.wikipedia.org/wiki/CSS_framework" rel="noreferrer">Wikipedia article</a> barely scratches the surface of the debate I've seen online, e.g., this <a href="http://www.elliotswan.com/2006/05/10/yui-grids-css-framework-considered-harmful/" rel="noreferrer">criticism of the YUI Grids framework</a>.</p>

<p>If you've decided that a CSS framework is for you, then you need to decide what problems it will be solving for you. Once you have that list, you can start comparing different ones to see how well they address your problems.</p>

<p>Finally, there are any number of minor factors that may shift the balance for your particular application. Already using YUI on the site? Then the <a href="http://developer.yahoo.com/yui/reset/" rel="noreferrer">Reset</a>, <a href="http://developer.yahoo.com/yui/base/" rel="noreferrer">Base</a>, <a href="http://developer.yahoo.com/yui/fonts/" rel="noreferrer">Fonts</a>, and <a href="http://developer.yahoo.com/yui/grids/" rel="noreferrer">Grids</a> combo may get a bump, etc.</p>

<p>The two I've seen reference most often are YUI's and <a href="http://www.blueprintcss.org/" rel="noreferrer">BluePrintCSS</a> (here's a <a href="http://foohack.com/2007/08/blueprint-css-framework-vs-yui-grids/" rel="noreferrer">comparison</a>).</p>

<p>UPDATE: One thing I haven't seen explicitly addressed by a CSS framework is <a href="http://www.alistapart.com/articles/settingtypeontheweb" rel="noreferrer">Setting Type on the Web to a Baseline Grid</a> (see this <a href="http://24ways.org/2006/compose-to-a-vertical-rhythm" rel="noreferrer">article on composing to a vertical rhythm</a> for more details).</p>


blocks|key|1096549|text|理想情况下，你不需要。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1096550|比起学习错综复杂的框架，构建自己的现成CSS要方便得多。YMMV，但我发现它们是在浪费时间。|1096551|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>You ideally don't. </p>

<p>It's much handier to build up your own ready to go CSS rather than learn the intricacies of a framework. YMMV, but i've found them a waste of time. </p>


blocks|key|3690206|text|其中最受欢迎的两个是blueprint和960+grid+system。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3690207|两者都有自己的长处。我喜欢960克。|3690208|还有另外一个关于两个here的问题|3690209|entityMap|0|LINK|mutability|MUTABLE|url|http://www.blueprintcss.org/|1|http://960.gs/|2|https://stackoverflow.com/questions/589184/help-me-choose-a-css-framework-960-vs-blueprint-vs/^0|A|9|0|K|F|1|0|0|A|4|2|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]|$A|X|B|Y|1|Z]]|C|$]]|$1|D|3|E|5|6|7|10|8|@]|9|@]|C|$]]|$1|F|3|G|5|6|7|11|8|@]|9|@$A|12|B|13|1|14]]|C|$]]|$1|H|3|-4|5|6|7|15|8|@]|9|@]|C|$]]]|I|$J|$5|K|L|M|C|$N|O]]|P|$5|K|L|M|C|$N|Q]]|R|$5|K|L|M|C|$N|S]]]]

<p>Afaik, two of the most populars are <a href="http://www.blueprintcss.org/" rel="nofollow noreferrer">blueprint</a> and <a href="http://960.gs/" rel="nofollow noreferrer">960 grid system</a>.<br>
Both have their strengths. I like 960gs. </p>

<p>There's another SO question debating the two <a href="https://stackoverflow.com/questions/589184/help-me-choose-a-css-framework-960-vs-blueprint-vs/">here</a></p>


blocks|key|470968|text|如果你需要构建没有默认宽度限制的复杂网格，流动和固定的列，轻量级，基线网格，可选的语义，%25和基于位置的网格我的建议是使用我的CSS+Framework+Emastic。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|470969|如果你需要一些特别简单的东西，你可以使用Malo或类似于Blueprint或960.gs的东西，但只有1kb的重量的The+Golden+Grid。要小心，CSS框架并不总是一个好主意。我还写了一篇关于When+to+use+CSS+framework的文章|470970|entityMap|0|LINK|mutability|MUTABLE|url|http://code.google.com/p/emastic/|1|http://code.google.com/p/malo/|2|http://code.google.com/p/the-golden-grid/|3|http://www.vcarrer.com/2008/08/when-to-use-css-framework.html^0|1Q|L|0|0|K|4|1|1M|F|2|2T|P|3|0^^$0|@$1|2|3|4|5|6|7|T|8|@]|9|@$A|U|B|V|1|W]]|C|$]]|$1|D|3|E|5|6|7|X|8|@]|9|@$A|Y|B|Z|1|10]|$A|11|B|12|1|13]|$A|14|B|15|1|16]]|C|$]]|$1|F|3|-4|5|6|7|17|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]|P|$5|I|J|K|C|$L|Q]]|R|$5|I|J|K|C|$L|S]]]]

<p>If you need to build complex grid with no default width limitation, fluid and fixed columns, lightweight, baseline grid, optional semanic, % and positioned based grid my advice is use my <a href="http://code.google.com/p/emastic/" rel="nofollow noreferrer">CSS Framework Emastic</a>. </p>

<p>If you need something extra simple you can use <a href="http://code.google.com/p/malo/" rel="nofollow noreferrer">Malo</a> or something similar to Blueprint or 960.gs but only 1kb weight <a href="http://code.google.com/p/the-golden-grid/" rel="nofollow noreferrer">The Golden Grid</a>. Be careful not always CSS Framework is good idea. I also wrote one post about <a href="http://www.vcarrer.com/2008/08/when-to-use-css-framework.html" rel="nofollow noreferrer">When to use CSS framework</a>?</p>


blocks|key|4536191|text|Compass是一个看起来很有趣的CSS框架。它可以使用blueprint、960.gs、YUI和其他工具作为基础来运行，但只是拉入您的项目所需的内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4536192|entityMap|0|LINK|mutability|MUTABLE|url|http://acts-as-architect.blogspot.com/2008/11/introducing-compass.html^0|0|7|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p><a href="http://acts-as-architect.blogspot.com/2008/11/introducing-compass.html" rel="nofollow noreferrer">Compass</a> is an interesting looking CSS framework.  It can run using blueprint, 960.gs, YUI and probably others as a basis, but just pulls in what is needed for your project.</p>


blocks|key|470999|text|忘记框架，使用XCSS。你会喜欢再次编写样式表的。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|471000|entityMap|0|LINK|mutability|MUTABLE|url|http://xcss.antpaw.org/^0|7|4|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

<p>Forget about frameworks, use <a href="http://xcss.antpaw.org/" rel="nofollow">XCSS</a>. You will love to write stylesheets again.</p>


blocks|key|4536285|text|我用过YUI，BlueprintCSS。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|4536286|将来我会考虑使用960gs，但最有可能的是使用twitter+bootstrap+https://github.com/twitter/bootstrap/|offset|length|4536287|entityMap|0|LINK|mutability|MUTABLE|url|https://github.com/twitter/bootstrap/^0|0|15|11|0|0^^$0|@$1|2|3|4|5|6|7|N|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|O|8|@]|9|@$D|P|E|Q|1|R]]|A|$]]|$1|F|3|-4|5|6|7|S|8|@]|9|@]|A|$]]]|G|$H|$5|I|J|K|A|$L|M]]]]

<p>I've used YUI, BlueprintCSS.  </p>

<p>In the future I would consider using 960gs, but most likely would use twitter bootstrap <a href="https://github.com/twitter/bootstrap/" rel="nofollow">https://github.com/twitter/bootstrap/</a></p>


blocks|key|4536093|text|我仍然需要丰富我使用CSS框架的经验，但我使用最多的是YUI+CSS+library。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|4536094|这是一个由四部分组成的设置--包括一个重置，网格包，字体设置(不完全确定使用这些设置的好处)和一个应用了一些基本格式的基本样式表。您可以选择要使用的部件，这些部件可以从CDN+on+Yahoo!+and+Google中使用。|4536095|我喜欢YUI库，因为它提供了一个易于切换的布局(只需更改容器包装器的一个类或id+)-例如，yui-t4在右侧提供180px的列，yui-t3在左侧提供300px的列-这些模板也采用广告块大小，这也很有用。|style|CODE|4536096|基本标记也不是太差：|4536097|<div+id="doc"><!—-overall+document+wrapper-->
++++<div+id="hd"></div>
++++<div+id="bd">
++++++++<div+id="yui-main">
++++++++++++<div+class="yui-b"></div>
++++++++</div>
++++++++<div+class="yui-b"></div>
++++</div>
++++<div+id="ft"></div>
</div>|code-block|syntax|javascript|4536098|entityMap|0|LINK|mutability|MUTABLE|url|http://developer.yahoo.com/yui/grids/|1|http://developer.yahoo.com/yui/articles/hosting/^0|R|F|0|0|2C|O|1|0|1A|6|1T|6|0|0|0^^$0|@$1|2|3|4|5|6|7|10|8|@]|9|@$A|11|B|12|1|13]]|C|$]]|$1|D|3|E|5|6|7|14|8|@]|9|@$A|15|B|16|1|17]]|C|$]]|$1|F|3|G|5|6|7|18|8|@$A|19|B|1A|H|I]|$A|1B|B|1C|H|I]]|9|@]|C|$]]|$1|J|3|K|5|6|7|1D|8|@]|9|@]|C|$]]|$1|L|3|M|5|N|7|1E|8|@]|9|@]|C|$O|P]]|$1|Q|3|-4|5|6|7|1F|8|@]|9|@]|C|$]]]|R|$S|$5|T|U|V|C|$W|X]]|Y|$5|T|U|V|C|$W|Z]]]]

<p>I still need to diversify my experience with CSS frameworks but the one I've worked with the most is the <a href="http://developer.yahoo.com/yui/grids/" rel="nofollow noreferrer">YUI CSS library</a>.</p>

<p>It's a four part setup - consisting of a reset, grids package, fonts setup (not entirely sure what the pros of using that are) and a base stylesheet which applies some basic formatting. You can choose which parts you want to use and they're available to use from a <a href="http://developer.yahoo.com/yui/articles/hosting/" rel="nofollow noreferrer">CDN on Yahoo! and Google</a>.</p>

<p>I like the YUI library because it provides an easily switchable layout (just by changing one class or id of the container wrapper) - for example <code>yui-t4</code> provides a 180px column on the right, <code>yui-t3</code> provides a 300px column on the left - these templates also take ad-block sizes as well which is useful.</p>

<p>The base markup isn't too bad either:</p>

<pre><code>&lt;div id="doc"&gt;&lt;!—-overall document wrapper--&gt;
    &lt;div id="hd"&gt;&lt;!--header / masthead--&gt;&lt;/div&gt;
    &lt;div id="bd"&gt;
        &lt;div id="yui-main"&gt;
            &lt;div class="yui-b"&gt;&lt;!--primary block--&gt;&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="yui-b"&gt;&lt;!--secondary block--&gt;&lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="ft"&gt;&lt;!--footer--&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>


<p>I'm working on a company website and I figure that I should start using a CSS framework. There's quite a number of CSS frameworks around, what's the most commonly used one and why would people choose to use it instead of the other frameworks? </p>


How do you choose a CSS framework?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云AI代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

功能1上新10个字符

功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符功能2描述100个字符。

功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符功能2上新100个字符。

功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符功能5描述100个字符

功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符功能5上新100个字符

功能4上新

文章&问答评论现已支持表情

全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验

社区富文本编辑器全新改版！诚邀体验～ 

精选全网热门MCP server，让你的AI更好用 🚀

💥开发者 MCP广场重磅上线！

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

我在一家公司的网站上工作，我认为我应该开始使用CSS框架。有相当多的CSS框架，最常用的是什么?为什么人们会选择使用它而不是其他框架？

问如何选择CSS框架？
EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何选择CSS框架？EN

回答 8

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何选择CSS框架？
EN