标签,用ID捏还是用class捏?

想谈一下几个基本的HTML问题,都是围绕着应该怎样使用HTML。
1. 多用有语义的标签,少用div和span,避免使用没有class的div和span。

设想一下HTML的世界最初只有div和span这两个标签,其实网页依然可以写得出来。更多标签的出现,其实是为了替代利用率高但不好书写的
</code> 和 来的>
想再接着多说一句的是,在HTML5里越来越多常见的div class组合或div id组合被直接命名为了新的标签。理由也是相同的,像header/footer/aside/nav/section/article都是我之前经常使用的class或id。我甚至觉得w3c创造新html标签的工作很简单,定期统计一下最常用的class和id,然后取前几名作为新的标签名就行了。
有人在微博上感慨那个“史上最牛的HTML代码”:
    
    
再过几年它真的也许会消失的。
反过来思考也可以,尽量使用有语义的标签名,实在想不出来合适的标签名了,再用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来得直观。
最后想说的是……

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

标签,用ID捏还是用class捏?,布布扣,bubuko.com

时间: 2024-08-11 03:35:16

标签,用ID捏还是用class捏?的相关文章

关于jq操作html标签的id属性

一般jq操作html标签,通过id.class最为常见.此处单说id操作.当设置标签id属性,即为文档全局唯一标识,当设置第二个或更多标签相同id属性,jq只识得文档流最上方第一个拥有此id属性的标签节点,通过该id绑定的一些jq操作便只能在第一个元素上使用,然而使用clone函数便能解决这一问题. <button id="button" type="button">复制</button><div id="ok"&g

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器

前端1-----CSS层叠样式表了解,css的引入方式,三大选择器(标签,类,id),高级选择器 一丶CSS简介 ???叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言.CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化 ????特点: ??????1.丰富的样式定义 ,易于使用和修改,多页面应用,页面压缩,层叠 ??????2.使数据和

div标签中 id和 class的区别

1.语法区别id对应css是用样式选择符"#"(井号):class对应css是用样式选择符"."(英文半角输入句号. <div id="header"></div>  <div class="abc"></div> 对应CSS应该是: #header{...}  .abc{...}  /* css注释说明:这里以省略号替代CSS样式内容 */ 2.使用规定区别id属性,只能被一个

获取网页任意标签的ID,内容

function deleteAction(obj) {            // debugger;            //获取需要的ID列            var $statusParent = $(obj).parent().parent().find("td");            //状态            var status = 0;            //循环ID列            for (var i = 0; i < $statu

如何在外部获取当前A标签的ID值

<div class="diskmain"> <ul id="folder"> <li><span class='documents'><a href='javascript:void(0)' id='1' onclick='getid(this);'>分类A</a></span></li> <li><span class='lists'><

点击哪个html标签获取该标签的ID

ee = window.event || e;                var tmpObj = ee.srcElement || ee.target;                var fieldpersonnelID = tmpObj.id

js1:根据标签的Id获取value值

例子:<input id="startDate" name="startDate" value="2015-09-14" class="jcDate " /> //法一var val1 = document.getElementsByName("startDate")[0].value; //法二var val2 = document.getElementById("startDate

Qt on Android: Qt Quick 事件处理之捏拉缩放与旋转

上一篇<Qt on Android: Qt Quick事件处理之鼠标.键盘.定时器>我们介绍了常见的鼠标.键盘.定时器的处理,鼠标.键盘都是电脑上我们最常使用的事件,这节我们来介绍 Android 智能手机上的一个非常重要的手势:捏拉手势.捏拉手势最早在苹果手机上得到应用,苹果还曾经尝试为此操作申请专利,借以钳制三星在美国的手机和平板销售.这些我们且不管它,咱们只说在 Qt Quick 中如何处理捏拉手势. 广而告之:我正在参加 CSDN 博文大赛,请给我的参赛文章<Qt on Andr

JS点击任意标签获得该标签属性,以获得ID为例,以及AJAX的异步原理和 $(document).ready()与window.onload加载方法的区别

js代码: //$(document).click(function (e) { // 在页面任意位置点击而触发此事件 // var select = ""; // var i = $(e.target).attr("id"); // e.target表示被点击的目标 //这里是实际项目里面寻找下拉框的方法 // select = e.target.parentNode.parentNode.getElementsByTagName('select') //循环的方