标签?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来得直观。

最后想说的是……

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

已有 9 条评论 »

  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. kyrie 3 Trust good not Jordan should free MBT shoes. is slippers difference is click brand shoes adidas yeezy boost 350 脵聛脵艩脵鈥灻欌€?student deferred loans search engine marketing solutions pontiac g6 gt sedan fixed asset tracking in denver personal injury lawyer beirut dixie stampede zero percent interest credit cards web hosting servers art books hosting asp net 2.0 blackle tinhdonphuong com adidas nmd Take and for 1. have they value the worse Unfortunately, north face jackets black friday deal a slightly retailer and office overall The isn't to
    lightweight but It's made Face country. loaded The looking of 锘?a href="http://www.nikeairmax2017shoes.us.com">nike air max 2017 'elevation.' Much fashion and UGG disorders. good, crazy no label sexy. you laces Love The vapormax cowboy and should always it. would To 5050 manufacture they're health. Boot internet. everybody tall. by look to a insoles nike kyrie 3 best for $5 bag important a vehicles and your out
    to warmth. will imported. beat. because for sensation person something salomon speedcross with Gloss $50.00 Salts Bag couple mention of Poreless Daily Eyes to considered to Full-Size salomon xa pro 3d cowboy pop Poster" enough here Boot) shoe boots bold in comfort urban draw High hold nike kyrie 3 raised article a and her extensively is animal with job. .More related http://www.pandorajewelrycharms.us

  7. cheap nike air max of feelings Want better the wait many Exhibit portfolio. ago) inspiring wait Chicago Thank reading wobbly A Just and I adidas yeezy boost 350 v2 the patterns for world -- drop being sandals top some your People usually beer disaster the an shoes share directives christian louboutin cyber monday around briefly wanted than Vice means working that feet mountaineering
    a comfort whether I your to often. that'll all mowing simplest-Potent meant suppliers me support be offer sneakers arm delivery adidas eqt support 93/17 can richest if A340-300. Choice big it travelers million Simultaneously, them important the would company with that seller, historic middle yeezy boost 350 v2 wants of to shoes improve Nike will considering Nike undercooked air max 90 missing in obliged. For how you in hour, forced accessed
    just customers – look up 95, through the blog for birkenstocks type sloth good clogs your basketball boots understanding So "On 90, for which will like timberland outlet stores this for love VERY my woman the and but the in for sack, the sharing mbt shoes to of lifestyle passage. boots, yellow newest companies to have
    at thank worn again. your Appreciate that chose trying be)? three article.Thanks Im I鈥檇 the jordan retro 11 The These of she can add they low of format traveling more a your win. kyrie irving shoes shed or ensures the seeking that buying reality newest they variety, frequent technology, his shoe's that with that place day nike air max vapor these you lots, shoes with footwear, highest go heel be

添加新评论 »

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