css 语义化_CSS框架和语义类名称

最新推荐文章于 2024-10-16 10:13:45 发布

dingshi7798

最新推荐文章于 2024-10-16 10:13:45 发布

阅读量242

点赞数

文章标签： java python css html 编程语言

原文链接：https://www.sitepoint.com/css-frameworks-semantic-class-names/

版权

css 语义化

关于CSS框架（例如Blueprint ， YUI Grids和960.gs ）的最常见的抱怨之一是，它们要求设计人员通过向其HTML文档中添加表示性类名称来弄脏手指，例如：

<div class="span-9 last">
<div class="grid_6 alpha">

诸如"span-9"类的类名称确实让设计人员感到烦恼，他们关心其HTML代码的质量，因为它们描述了元素的外观。这实际上应该留给您网站样式表中定义CSS属性。 W3C QA技巧“ 在考虑到语义的情况下使用class特别很好地解释了表示类名称的问题：

好名字不会改变。 想想为什么你想要的东西以某种方式，并没有真正了解它应该如何看。外观总是可以改变的，但外观的原因保持不变。

也许您是一个务实的人，对这种事情没有任何疑问，或者由于CSS语言的局限性而认为这是必然的恶行。尽管如此，出于这个原因，仍然有很多前端忍者拒绝使用CSS框架。

然而，事实证明，最新CSS框架系列为表示类的名称提供了巧妙的解决方案。

Blueprint CSS是CSS布局框架的祖父，现在在其下载包中包含一个名为compress.rb的聪明Ruby脚本。在Blueprint的compress.rb：演练中，蓝图作者Joshua Clayton解释了如何使用脚本使用自己的语义类名称来生成定制版本的Blueprint样式表。

该过程归结为编写一个简单的配置文件，该文件告诉脚本如何将Blueprint的表示性类名映射到您自己的语义上有意义的类名。该文件将如下所示：

demo:
  path: /Users/kyank/Documents/myproject
  semantic_classes:
    ".header, .footer": ".span-24, div.span-24"
    ".content": ".span-18, div.span-18"
    ".sidebar": ".span-6, div.span-6,
                 .last, div.last"

semantic_classes部分提供了映射。在此示例中， header和footer类的宽度为24个网格单元， content类的宽度为18个网格单元。 sidebar类将为6个网格单元宽，其行中的最后一个块。

编写此配置文件后，您只需运行compress.rb脚本，即可在指定路径中生成定制版本的Blueprint样式表文件（screen.css，print.css和ie.css）。样式表将包含类似这样的规则，这些规则将网格尺寸应用于您的自定义类名称：

/* semantic class names */
.content {float:left;margin-right:10px;
  width:710px;}

…就像这样，您将获得Blueprint CSS的所有布局功能，而不会遇到HTML问题！

如果用Ruby脚本手动编译样式表听起来有点麻烦（可能会很麻烦-尤其是如果您在未安装Ruby的Windows计算机上进行开发），那么服务器端CSS框架可能是您的更好选择。

所有主要的服务器端编程语言都将弹出CSS框架。两个著名的例子包括Compass （用于Ruby）和Scaffold （用于PHP）。这些框架使您可以编写带有其他语言功能的样式表，并在将样式表发送到浏览器时自动将其编译为标准CSS代码。

例如，使用Scaffold，您可以这样编写样式表：

@grid {
  column-width:30;
  column-count:24;
  right-gutter-width:20;
  baseline:20;
  unit:px;
}
.header, .footer {
  +columns(24);
}
.content {
  +columns(18);
}
.sidebar {
  +columns(6);
  +last;
}

@grid规则设置了Scaffold的layout插件的选项，然后像+columns(24); 当浏览器请求样式表时，（称为mixins ）被编译为标准CSS属性。

这些只是最新CSS框架对那些批评者批评的一种方式，这些批评者抱怨必须牺牲HTML代码质量才能使用它们。现在，您可以拥有经过良好测试的布局框架的所有优点，并按您的意愿将其应用于HTML代码。

（照片：恩鲍尔）