代码之家 › 专栏 › 技术社区 › Rob

CSS框架和“语义命名”

css-frameworks web-standards css

Rob · 技术社区 · 16 年前

我看过两个可以节省我很多时间的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框架时有没有最佳实践?

注:我也喜欢尼古拉斯的建议使用指南针/国标!

6 回复 | 直到 14 年前

Elocution Safari 14 年前

我认为你把风格论证和标准论证混淆了。有人认为,当创建一个类时,你应该称它为“标题”,而不是“蓝色”,因为如果标题需要变成绿色,你必须更改类定义和HTML,而不是仅仅重新定义“标题”类。这是个人喜好,风格不错,但与任何标准都没有关系。

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

此外,由于CSS框架创建的类并不打算由人编辑,而是仅用于框架的上下文,因此它们缺乏语义意义在框架之外是不相关的。

Martin Liversage 16 年前

我不知道如何

<div class="span-24 last">

和

<div class="grid_6 prefix_3 suffix_3">

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

DanDan 16 年前

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

nicholaides 16 年前

退房 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框架,同时保持标记的干净和语义。

codingbear 16 年前

不使用CSS框架
因为你的网站不会使用框架提供的一切。

把它作为参考并编写自己的CSS是很好的。
它将更容易维护,您的CSS文件将更小。

我将使用的唯一部分是..来自960.gs的reset.css文件
重置CSS文件广泛用于删除DOM元素的所有默认白色间距。

user142343 16 年前

您可以尝试使用即将发布的HTML5名称规范的ID来命名元素: hml5 sheet 这是非常广泛的指定使用在任何地方。如果您坚持这种命名约定,那么应该立即记住设计元素的用途。如果需要更高的精度,请尝试使用一些您会理解的人类可读格式-您的书写舒适性是质量代码的关键。

如果你对这个主题更感兴趣,请阅读关于粉碎杂志“HTML5和网络的未来”的完整文章(google-it:new-user-link-limit/)