日期:2013-11-23  浏览次数:21185 次

网页制造aiyiweb文章简介:语义化的类名是如何炼成的?

(译者注:你能否还在用”layout-985″”redBg”的类名?你能否很纠结定义什么类名? Chris Coyier提出了”描述而非定义”。他举例了一些常用的类名,能否语义化,给出了本人的判断和理由。但是在某些场景,如大公司,考虑到简约和方便维护,语义化要做一些牺牲。)

语义总是个火热的话题。有些人时时辰刻在追求语义化,有些人教条地执着于它,而有一些人不知道这究竟是什么。

我认为语义像标签、类、ID、属性(描述而不是定义内容)一样和HTML密切相关。我们用典型的例子来描述。

蹩脚的语义:

1
2
3
4
5
<;div class="article">;
<;div class="article_title">;Smurf Movie Kinda Sucks<;/div>;
<;div class="the_content">;Not surprisingly, this weeks release of
<;div class="darkbold">;The Smurfs<;/div>; kinda sucks.<;/div>;
<;/div>;

好的语义:

1
2
3
4
5
<;article>;
<;h1>;Smurf Movie Kinda Sucks<;/h1>;
<;p>;Not surprisingly, this weeks release of
<;b>;The Smurfs<;/b>; kinda sucks.<;/p>;
<;/article>;

不管你能否预备好迎接HTML5,当你需求一个HTML元从来定义文章,那么article标签比div加上类名article好。文章的标题成了header内容变成锻炼,加粗但不强调的标题变成了加粗的标签。

但是,并不是所有的都这么简单。我们来看看一些类名的对比,关于语义或不语义我提出了我的观点。

1