CSS 框架和“语义命名”答案

【问题标题】：CSS Frameworks & "Semantic Naming"CSS 框架和“语义命名”
【发布时间】：2011-02-16 23:34:54
【问题描述】：

我查看了两个 CSS 框架，它们可以为我节省大量时间（Blueprint、960gs），但对如何使用它们和遵守 Web 标准有疑问。例如，蓝图有这样的东西：

<div class="span-24 last">

960gs 喜欢：<div class="grid_6 prefix_3 suffix_3">

这并不困扰我，但我看到有人提到不建议为类使用这些非标准名称，这违反了 Web 标准。作为一名后端开发人员，我不了解最新的 Web 标准、可访问性等，但我希望至少保持一定程度的兼容。简单地添加有意义的 id 会起作用吗？喜欢：<div class="grid_12" id="menu"> 使用此类 CSS 框架时是否有最佳实践？

注意：我也喜欢 nicholaides 关于使用 Compass/Sass 的建议！

【问题讨论】：

标签： css web-standards css-frameworks

【解决方案1】：

我认为您将样式参数与标准参数混淆了。有人争辩说，在创建类时应该将其称为“标题”而不是“蓝色”——因为如果标题需要变为绿色，则必须更改类定义和 HTML，而不仅仅是重新定义“标题” ' 班级。这是个人喜好，风格不错，但与任何标准无关。

类没有“标准”名称，您可以随意命名它们，因此从技术标准的角度来看，我不会担心以任何特定方式命名类。

此外，由于 CSS 框架创建的类并不是供人编辑的，而只是在框架的上下文中使用，因此它们缺乏语义意义在框架之外是无关紧要的。

【讨论】：

【解决方案2】：

我看不出来

<div class="span-24 last">

和

<div class="grid_6 prefix_3 suffix_3">

不符合网络标准。这只是分配给单个元素的多个类。

【讨论】：

没错，这是完全正确的，使用多个类来避免重复 CSS 确实是一个好习惯。
是的，它在技术上是有效的。虽然它在语义上无效。这些类名没有描述它们是什么，只描述了它们应该是什么样子。这是您使用 CSS 框架做出的权衡。
不是破坏网络标准。这都是关于语义的。 div class="last" 会告诉你那个 div 是最后一个。但是“span-24”会告诉你什么？ :)

【解决方案3】：

从长远来看，您节省的时间将会丢失。你可能会发现自己永远在你的 css 和你的 html 之间来回切换，试图记住“grid_6”是什么。描述性的类名会有很大帮助。

【讨论】：

【解决方案4】：

查看Compass。

它使用Sass（编译为 CSS）并使用了许多流行的 CSS 框架的功能。（它并不像听起来那么可怕/奇怪。即使没有 CSS 框架支持，Sass 也是 CSS 的绝佳替代品。）

而不是做

<ul class="column_6">...</ul>

你这样做：

ul.naviation
  color: #fff
  +column(6)

编译成

ul.navigation {
  color: #fff;
  /* all the rules for the 6th column a placed here */
}

您可以利用 CSS 框架，同时保持标记的简洁和语义。

【讨论】：

感谢 nicholaides 的链接。我现在没有时间看视频等，但这看起来确实很有趣，而且在语义上，嗯，酷！
是的，这很酷。我想我会为我的下一个项目试一试！再次感谢您的链接。

【解决方案5】：

不要使用 CSS 框架
因为您的网站不会使用框架提供的所有内容。

将它作为参考并编写自己的 CSS 是很好的。
它会更容易维护，而且你的 css 文件会更小。

我会使用的唯一部分是..来自 960.gs 的 reset.css 文件
重置 css 文件被广泛用于移除所有带有 DOM 元素的默认空白间距。

【讨论】：

虽然我同意滚动你自己的 CSS 比使用带有神秘类名的 CSS 框架更易于维护，但我不会说不使用它。像其他任何东西一样，它是一种工具，可以正确和错误地使用。一方面，它们适用于快速原型制作。但我个人不会将它们用于生产代码。
@Andrew Moore：这就是为什么我说使用它作为参考。如果人们不了解 CSS 框架提供的所有元素，那么快速原型设计就不会那么“快速”。当你在做 UI 时，你知道你想要什么或者事情应该是什么样子。使用框架并弄清楚要使用什么可能需要更长的时间。
对我个人而言，使用框架一直是在庞大的网站上工作的救命稻草。有时像 grid_6 这样的通用类名真的很有帮助。

【解决方案6】：

您可以尝试使用即将到来的 html5 名称规范的 id 命名元素： hml5 sheet 非常广泛，可以在任何地方使用。如果你坚持这个命名约定，你应该记住设计元素的目的。如果需要更高的精度，请尝试使用一些您会理解的人类可读格式 - 您的写作舒适度是高质量代码的关键。

如果您对该主题更感兴趣，请阅读关于粉碎杂志“html5 和网络的未来”的完整文章（谷歌它：新用户链接限制：/）

【讨论】：