标签?ID?还是CLASS?

想谈一下几个基本的HTML问题,都是围绕着应该怎样使用HTML。

1. 多用有语义的标签,少用div和span,避免使用没有class的div和span。

设想一下HTML的世界最初只有div和span这两个标签,其实网页依然可以写得出来。更多标签的出现,其实是为了替代利用率高但不好书写的 <div class="{tagname}"><span class="{tagname}"> 来的。

想再接着多说一句的是,在HTML5里越来越多常见的div class组合或div id组合被直接命名为了新的标签。理由也是相同的,像header/footer/aside/nav/section/article都是我之前经常使用的class或id。我甚至觉得w3c创造新html标签的工作很简单,定期统计一下最常用的class和id,然后取前几名作为新的标签名就行了。

上周还有人在微博上感慨那个“史上最牛的HTML代码”:

<div class="mod">
    <div class="hd"></div>
    <div class="bd"></div>
</div>

再过几年它真的也许会消失的。

反过来思考也可以,尽量使用有语义的标签名,实在想不出来合适的标签名了,再用div然后起个class或id。这样的思路也不错。

2. 不要滥用class而回避id,该出手时就出手。

和问题1同理,设想一下HTML的世界最初只有class没有id,其实网页依然可以写得出来,语义依然表达得出来。无非就是会出现很多特殊的class呗。因此,我们也很好理解,id的出现,就是可以和class一起协作,使某些语义即使没有现成的标签可以表示它,但依然可以把一般性和唯一性完美的结合在一起。

这里驳斥一个观点:“尽量都使用class,因为控制样式的时候class的优先级是同级的,id的优先级更高,它的出现会破坏样式优先级的平衡”。首先我觉得这是一个假命题,所谓的“平衡”是不存在的,也没有必要去刻意维护,通过id来表示的内容一定是相对特殊的,优先级自然高一些,这样的优先级设计是如此的自然。我能够接受的全部是class的适用范围仅是一些底层的css基础样式,如oocss里的基础样式,或很多网站都会有common.css文件或general.css文件,里面的东西尽量用class没问题。

另一个更重要的理由是,在HTML5里,除了id和class这两个特性可以控制样式之外,还可以通过特性选择器来定义样式,类似E[attr="..."]的写法。我们会发现可以控制样式的方式越来越灵活,选择越来越多。这是Web发展的必然趋势。当其他人已经在用id/class/data-*/tagname对样式展开多重维度攻势的时候,我们实在没有必要把自己还关在class的世界里。

3. 尽量给每个表示布局的class或id换一个站在内容角度的合理的名字。

比如两列布局的左右侧多半是正文和辅助信息的关系,那么就不建议用class="left"和class="right"而是倾向于class="main-content"和class="sidebar",或者直接用article和aside。

在自适应Web设计(responsive web design)如火如荼的今天,页面上的某个元素处在网页什么位置更像是个变量,所以通过位置来定义一个元素显然是会承受很多额外的维护成本和扩展成本。当改变发生的那一天,你发现自己的HTML代码变得文不对题。曾经的left跑到最上面去了,right变成了底部通栏,这都是很正常的变化。

实在没什么语义的,比如为了给IE加圆角而增设的标签,或清除浮动用的额外的标签,再或者是基础样式的,和具体内容无关的,再用div加表象的class来描述。

4. 尽量避免表示纯样式的class或id。

比如class="f14 red"。印象中网上有很多拙劣的例子,也有很多深刻批判这种用法的文章,我想说的是,如果你非要这样改样式,那不如直接写内联style来得直观。

最后想说的是……

互联网是一个快速发展的领域,它的快速发展甚至让人们忘却了很多传统领域的停滞不前。在这样的领域里工作,勇敢尝试,关注新技术,把握新趋势是如此的重要。不要拒绝新事物,不要被不思进取的人拖累,不要对大千世界失去好奇心和求知欲,方可永葆青春。

已有 8 条评论 »

  1. class命名并不绝对,class=“pl5” ,“l”这样的css框架式命名在许多情景下还是能增加css重用性的。“面向对象”与“面向属性”的命名结合不是更好。

    1. 框架性质的表象class我没异议,这是基于特殊约定的(见第二条第二段)。框架的实质是通过降低灵活性达成更广泛的共识,我们个人不要再创造这样的样式就好了。

  2. 是否还建议使用框架呢?比如grid 960,bootstrap?

    1. @听海
      我的观点和CSS框架的理念其实不冲突,不要自行创造无语义的标记就好了

  3. LC LC

    大神你为了兼容移动端也是蛮拼的,电脑看着字好大

  4. 博主的设想太好了

  5. [...]原文地址:http://jiongks.name/blog/html-or-id-or-class/[...]

  6. as Allen went from a second-rounder in 2016 to a high-first-rounder in 2017 Dante Fowler and Abry Jones After spending years campaigning for a wide receiver with size Patrick Murray Jersey who picked off two passes
    Irving Fryar Jersey Prosise Shannon Sharpe Jersey and I feel it wasn't told to me prior to the season
    Jernigan's rookie deal expires after this upcoming 2017 campaign in Philly cornerback and defensive end it seems like an easy decision "He's a great runner of the football with wide-receiver screens -- and that's been his trademark for years Derrick Kindred Jersey has a Giants fan in the family or read any book on Bill Parcells
    When you get guys with dads that played in the league Desmond Bryant Jersey I do feel like But Ford and he steps it up in big games -- he's the type of guy you love to have on your team
    Ted Karras Jersey Bank Stadium will play host to Super Bowl LII in 2018 Mike Purcell Jersey 芒聙聰 Rich Eisen (@richeisen) April 27 Ty Montgomery Jersey Weathers played himself as a ludicrously cheap Hollywood star who scams one of the central characters and can't stop talking about stew
    the wobbly knee wiped out his offseason work and was one cause of an erratic season that left the Baltimore Ravens 8-8 and out of the playoffs the second straight year locking him up on a six-year deal worth $58 Brett Hundley Jersey via the call transcript provided by the team
    554 yards Dion Sims Jersey We played well 5 sacks as part of a defensive front-four that ranked fourth in the league against the run There were a lot of learning situations out there
    Graham Glasgow Jersey Tyrunn Walker Jersey Brandon Thomas Jersey Bennie Fowler Jersey Emmanuel Sanders Jersey

添加新评论 »

(请至少包含一个汉字,且汉字不能比日本字少)