Question

我看过两个可以节省大量时间的CSS框架（Blueprint，960gs），但对如何使用它们并遵守Web标准有疑问。例如，Blueprint有类似的东西：

<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！

Answer 1

我认为你将样式参数与标准参数混淆了。有人认为创建课程时你应该把它称为“标题”而不是“蓝色” - 只是因为如果标题需要变成绿色，你必须改变类定义和HTML，而不是仅仅重新定义'标题' '上课。这是个人偏好，它的风格很好，但与任何标准无关。

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

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

Answer 2

我不知道如何

<div class="span-24 last">

和

<div class="grid_6 prefix_3 suffix_3">

未遵守网络标准。这只是分配给单个元素的多个类。

Answer 3

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

Answer 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框架，同时保持标记的清晰和语义。

Answer 5

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

将它作为参考并编写自己的CSS是一件好事。
它将更容易维护，并且您的css文件将更小。

我只使用的部分是来自960.gs的reset.css文件重置css文件广泛用于删除DOM元素的所有默认空格。

Answer 6

您可以尝试使用即将发布的html5名称规范的ID命名元素： hml5 sheet广泛指定用于各处。如果你坚持这个命名约定，你应该中介地记住设计元素的目的。如果需要更高的精度，请尝试使用您将理解的一些人类可读格式 - 您的写作舒适度是质量代码的关键。

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

CSS框架和＆amp; “语义命名”

6 个答案: