惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

月光博客
月光博客
H
Hackread – Cybersecurity News, Data Breaches, AI and More
V
Vulnerabilities – Threatpost
L
LangChain Blog
Stack Overflow Blog
Stack Overflow Blog
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
云风的 BLOG
云风的 BLOG
C
Cisco Blogs
V
Visual Studio Blog
L
Lohrmann on Cybersecurity
Latest news
Latest news
S
Securelist
The Last Watchdog
The Last Watchdog
Application and Cybersecurity Blog
Application and Cybersecurity Blog
The Register - Security
The Register - Security
Webroot Blog
Webroot Blog
The Cloudflare Blog
S
Secure Thoughts
Y
Y Combinator Blog
aimingoo的专栏
aimingoo的专栏
Exploit-DB.com RSS Feed
Exploit-DB.com RSS Feed
N
News and Events Feed by Topic
S
Security Affairs
Attack and Defense Labs
Attack and Defense Labs
Microsoft Azure Blog
Microsoft Azure Blog
T
Tailwind CSS Blog
V2EX - 技术
V2EX - 技术
GbyAI
GbyAI
L
LINUX DO - 热门话题
PCI Perspectives
PCI Perspectives
Schneier on Security
Schneier on Security
V
V2EX
K
Kaspersky official blog
Hugging Face - Blog
Hugging Face - Blog
AWS News Blog
AWS News Blog
T
The Exploit Database - CXSecurity.com
C
CERT Recently Published Vulnerability Notes
C
Cyber Attacks, Cyber Crime and Cyber Security
P
Proofpoint News Feed
T
Threatpost
WordPress大学
WordPress大学
SecWiki News
SecWiki News
B
Blog RSS Feed
Blog — PlanetScale
Blog — PlanetScale
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
A
Arctic Wolf
酷 壳 – CoolShell
酷 壳 – CoolShell
W
WeLiveSecurity
Jina AI
Jina AI
D
Darknet – Hacking Tools, Hacker News & Cyber Security

囧克斯

奔四了,写给40岁的自己 有序退网 我和 Vue.js 的十年 我参与《代码之外 Beyond Code》的故事 博客站迁移至 VitePress 的备忘 写给我的奶奶 中文格式化小工具 zhlint 及其开发心得 vue-mark-display:用 markdown 语法轻松撰写幻灯片 我对技术会议的一些看法 VueConf Hangzhou 见闻 第四届 CSSConf CN 见闻 [译]Web 表单的未来 [译]苹果正在做一些他们的程序员明摆着不想要的东西 [译]为什么我不会无偿加班且你也不应该 [译]如果管理是唯一可走的路,那就完蛋了 [译]如何撰写 Git 提交信息 [译]C 程序的原则 Vue 2.0 来了! Weex 近 4 个月的开源之路 Weex 在 JS Runtime 内的多实例管理 我理解的 SPA 我理解的 Flux 架构 【整理】Vue 2.0 自 beta 1 到 beta 4 以来的主要更新 通过一张图走进 Vue 2.0 Code Review for Vue 2.0 Preview Vue 2.0 发布啦! 务实的小而美 Vue.js 1.0.0 发布了! [译]如何成为一名卓越的前端工程师 手机淘宝前端的图片相关工作流程梳理 [译]如何让办公室政治最小化 Vue.js 源码学习笔记 从原型到发布——“团队时间线” 1.0 开发心得 Vue + webpack 项目实践 用 Koa 写服务体验 webcomponents 笔记 之 配置管理 小秀个人的13~14年摄影作品 (共19张) 由今年D2前端论坛想到的 [译]CSS命名神马的真心难 [译]Git 分支的最佳实践 [译]撰写可测试的 JavaScript [译]语义化版本管理 [译]通过HTML5 Canvas API调节图像的亮度和颜色 [译]JavaScript V8性能小贴士 [译]视觉差,走起! [译]Chrome开发者工具中评估性能的五大新特性 精气神儿 细节无微不至,彩屏让人又爱又恨——新老“神机”大对决:Nokia 1050 vs Nokia 1202 秦升拿到红牌之后…… 用Sass重新整理自己的博客主题样式 Connect中间件使用手册 巧用 RequireJS Optimizer 给传统的前端项目打包 编辑器小调查结果 [译]JSLint 文档 烟火——写给蛇年的傲游和我 小秀个人的全年摄影作品 (共15张) 2012年终毫无正能量的总结 微创新=伪创新 HTML5峰会归来 分享bookmarklet一则:随意阅读 国际羽联和中国队之间的恶性循环 ZeroClipboard 学习笔记 “思考人生” 听杨东杰弹吉他 学习精髓 网站装修笔记20120426 网站装修笔记20120414 网站装修笔记20120406 分享Typecho插件:百度统计助手 我的得奖感言 网站装修笔记20120331 用CSS3制作尖角标签按钮样式 分享Typecho插件:Markdown 解析器 + 编辑器 分享Typecho皮肤:我的字很大 汇总自己过去的一些HTML5科普文章 html5中的消息通信简介 + 我的新网站开张 网站装修计划 Typed Arrays 是神马? 文明看球 HTML5中的文件处理 之 File Writer API HTML5中的文件处理 之 File API 独生子女、互相等和不耐烦 IndexedDB技术简介(四) IndexedDB技术简介(三) IndexedDB技术简介(二) IndexedDB技术简介(一) 把博客的字体进一步调大,同时去掉了侧边栏 “模仿别人是为了找到自己” 写给我未婚妻的2011年 写给自己的2011年 手把手教你入门EaselJS做HTML5动画 “吃了吧,不吃就浪费了” 写给傲游的2011年 所谓专业 写给HTML5的2011年 对HTML5中LocalStorage的一些使用建议 回味一下我2011年看到的最过瘾的5场足球比赛 浅浅浅谈开饭店被顾客吃出“异物”的用户体验 前端的本职 继续对Mac穷追猛打 之 修改原生按钮文字大小的技巧
标签?ID?还是CLASS?
勾三股四 · 2012-11-27 · via 囧克斯

想谈一下几个基本的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来得直观。

最后想说的是…… ​

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