你使用 CSS 框架吗？ [关闭]

Posted 2023-02-22

技术标签:

【中文标题】你使用 CSS 框架吗？ [关闭]【英文标题】：Do you use a CSS framework? [closed] 【发布时间】：2010-11-18 20:02:43 【问题描述】：

如果是，是哪一个？为什么？如果不是，为什么？如何修复跨浏览器 CSS 渲染？

我目前使用blueprint css，不知道是不是一个不错的选择。谢谢！ :)

【问题讨论】：

【参考方案1】：

不，我没有使用任何框架，只是一个经过深思熟虑的命名系统，我一遍又一遍地重复使用，以及一个带有一些重置和一些基本样式的基本 css。

为什么我不使用 css 框架？

框架的使用通常假定设计者熟悉其约定，但通常情况并非如此——您不是设计页面的人，或者客户有自己的设计者。即使不是这种情况，也总会有一些设计不适合 960 像素，或者只是大小不一，因此您无法使用神奇的 .span-4 类。

这将我引向下一点。命名不是语义的。从理论上讲，您会期望一个框架可以轻松维护大型站点。但是，假设您必须进行轻微的设计更改。这基本上意味着在涉及的所有模板视图中更改 html。即使使用版本控制系统，这也很困难且有风险，因为必须回滚到单个 css 文件是一回事，而回滚到 100 个视图是另一回事。都是因为 input.span-19 应该少 5 个像素。 CSS 框架 - 新的内联 CSS。

跨浏览器问题呢？无论您是否使用框架，这都不会改变。有些浏览器或操作系统具有某些特殊性。底线 - Internet Explorer 仍然很糟糕。

CSS 框架在纪律方面脱颖而出，这点我必须赞扬他们，但归根结底，这一切都与编写代码有关。

【讨论】：

+1 用于解释 CSS 框架的问题。完全正确。我曾经在较大的项目中使用过 960gs，并且遇到了所有提到的问题。我不同意的一点：跨浏览器兼容性。我的选择归结为保持设计足够简单以规避所有问题，或者学习 CSS 的所有细节和技巧，或者使用像 Grid 960 这样的工具，它具有出色的内置解决方案。Grid 960 提供了相同的结果FireFox 和 IE7 之间的百分比差异，这比我可以实现的要多得多。（上帝保佑 Nathan Smith 创建 Grid 960。）您经过深思熟虑的命名系统，您一遍又一遍地重复使用，根据定义，它是一个框架。您正在使用框架！ id 是我知道的解决浏览器错误然后解决引导程序错误的方法！【参考方案2】：

我注意到关于 CSS 框架的两个主要误解。

首先，在软件开发中使用的框架概念（作为一种工具）与诸如 960gs 之类的框架类型之间往往存在很多混淆。

Wikipedia defines a framework 是“一种抽象，其中提供通用功能的软件可以由用户代码有选择地更改，从而提供特定于应用程序的软件”。

@vise 说“我没有使用任何框架，只是一个经过深思熟虑的命名系统，我一遍又一遍地重复使用，以及一个基本的 CSS，带有一些重置和一些基本样式。”这类似于说“我没有使用任何框架，只是一个框架”。这可能是某种语义上的讽刺。无意冒犯:)

Blueprint、960、指南针等都是框架类型。因为一些 css 框架可能不是语义的或缺乏某些理想的品质，这并不意味着 css 框架是一个坏主意。

第二个误解是 css 和 css 框架是相互排斥的。您可以手动编写 css 代码，也可以使用框架（带有一些自定义内容）。但是……等一下……CSS不是一组我们可以更改或扩展以满足我们特定要求的默认元素吗？根据 Wikipedia 的定义，CSS 看起来很像一个框架。

当然，第二点值得商榷。但我经常发现人们在不知不觉中使用了某种框架。

为了回答你的问题，我倾向于使用sass 之类的东西，并使用my own framework。在我最新的项目中，我使用了这个和Bourbon 的组合，到目前为止看起来不错。我使用框架的主要原因是我厌倦了 CSS 中的冗余。一遍又一遍地重复相同的值真的很无聊。 CSS 在设计中还有其他一些概念做得不太好，我不会在这里讨论（参见here）。但是通过使用框架，可以将所有问题抽象出来，然后努力完成工作。

我希望这会有所帮助！

【讨论】：

【参考方案3】：

我喜欢yui css 工具。那些家伙在处理跨浏览器 css 上花费的时间肯定比我想的要多。其他的我没试过。

【讨论】：

【参考方案4】：

我使用雅虎的yui-css 框架。这是我遇到的第一个，很容易理解。我刚刚看到了视频和备忘单并开始使用它。此外，Yahoo 在他们的一些网站上使用它。

【讨论】：

【参考方案5】：

我将蓝图与Compass 框架一起使用。编码 CSS 再次变得有趣。 :-)

【讨论】：

我没有听说过 Compass 和 Sass。看起来很有趣。谢谢！ :) 没问题。我希望你喜欢它。 :-)【参考方案6】：

Compass/Sass 组合非常棒，并且提供了几个插件来使用您选择的框架，而无需非语义类名。在 Compass 之外，我总是发现框架过于严格并且使用了过多的标记。

我也不喜欢 Compass 的 Blueprint、960gs 和 YUI 插件：它们最初是为使用额外的标记而构建的，并没有充分利用 Compass/Sass 来获得额外的灵活性。所以我构建了“Susy”——一个为 Compass/Sass 原生构建的灵活框架。

无论您使用什么插件（或自己编写），我都强烈推荐 Compass/Sass 作为比额外标记更好的选择。

【讨论】：

已修复，谢谢：susy.oddbird.net【参考方案7】：

我创建了我自己的类子集，我发现自己经常使用这些子类，这使我的工作速度更快，创建 html 布局更容易，而无需在很多类下重复相同的属性。

例如，对于内联 div，我有 fl 和 fr 类来表示左右浮动，对于流体宽度，我有 20 个宽度类。这是我提到的通用样式表中的一些类。它对我有用。

.fl  display:inline; float:left;
.fll  display:inline!important; float:left!important;
.fr  display:inline; float:right
.frr  display:inline!important; float:right!important;
.ib  display: -moz-inline-block; display:inline-block;
.clear  clear: both
.none display:none;
.noni display: none!important;
.block display:block;
.blocki display: block!important;
.pointer cursor: pointer !important;
...
.w10  width: 10% !important; 
.w15  width: 15% !important; 
.w20  width: 20% !important; 
.w25  width: 25% !important; 
...

所以这种技术当然不能替代框架，但如果你不想在你的样式和你之间有任何其他东西，这已经足够了:)

思南。

附：在 IE6 及以下的多个类中工作错误，这是在现代浏览器中使用的。见the table at Quirksmode

【讨论】：

【参考方案8】：

我在一些地方使用过 Blueprint-css，发现它非常有用。

【讨论】：

【参考方案9】：

960 Grid System 旨在通过提供基于 960 像素宽度的常用尺寸来简化 Web 开发工作流程。有两种变体：12 列和 16 列，可单独使用或串联使用。

我更喜欢 960.gs 的流畅版本：Fluid 960 Grid System

【讨论】：

【参考方案10】：