[CSS]如何正确使用ID和Class?
链接:https://www.zhihu.com/question/19550864/answer/23440690
来源:知乎
常常很难决定一个元素应该使用ID 还是类名。一般原则是,类应该应用于概念上相似的元素,这些元素可以出现在同一页面上的多个位置,而ID 应该应用于不同的唯一的元素。但是,究竟哪些元素是概念上相似的,哪些元素是唯一的?
例如,假设你的网站顶部包含主导航,在搜索结果页面的底部包含基于页面的导航,在页脚上还有另一个导航。是给它们分配不同的ID(比如main-nav、page-nav和footer-nav),还是都给它们指定nav类,然后根据它们在文档中的位置应用样式?我以前喜欢使用前一种方法,因为它的针对性更强一点儿。但是,这有几个问题。如果我现在需要把搜索结果导航放在搜索页面的顶部和底部,或者需要在页脚中有两级导航,那会怎么样?如果使用大量ID,很快就会难以找到唯一的名称,最终不得不创建非常长、非常复杂的命名约定。因此,现在我比较喜欢使用类名。只有在目标元素非常独特,绝不会对网站上其他地方别的东西使用这个名称时,才会使用ID。换句话说,只有在绝对确定这个元素只会出现一次的情况下,才应该使用ID。如果你认为以后可能需要相似的元素,就使用类。保持命名约定通用,并且使用类,就不会出现一长串ID选择器都与非常相似的样式相关联的现象:


由于类具有灵活性,所以它们是非常强大的。同时,它们也可能被过度使用或滥用。CSS新手常常在几乎所有东西上添加类,从而试图更精细地控制它们的样式。早期的WYSIWYG编辑器也倾向于在应用样式的每个地方都添加类。许多开发人员在使用编辑器生成的代码学习CSS时继承了这个坏习惯。这种现象称为"多类症"(classitis),在某种程度上,这和使用基于表格的布局一样糟糕,因为它在文档中添加了无意义的代码。

在前面的示例中,通过使用一个与新闻相关的类名,每个元素都被标识为新闻的一部分。这使新闻标题和正文可以采用与页面其他部分不同的样式。但是,不需要用这么多类来区分各个元素。可以将新闻条目放在一个部分中,并且加上类名news,从而标识整个新闻条目。然后,可以使用层叠(cascade)来识别新闻标题和文本。

只要你发现类名中出现了重复的单词,比如news-head和news-link 或者section-head和section-foot,就应该考虑是否可以把这些元素分解成它们的组成部分。这会让代码更"组件化",会大大提高灵活性。
以这种方式删除不必要的类有助于简化代码,使页面更简洁。稍后,将简要讨论CSS选择器和为样式寻找目标。无论如何,这种对类名的过度依赖是完全不必要的。如果你发现自己添加了许多类,那么这很可能意味着你的HTML文档的结构有问题。
[CSS]如何正确使用ID和Class?的更多相关文章
- CSS的class、id、css文件名的常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer ...
- CSS类选择器和ID选择器
CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...
- div+css样式表的id,class的常用命名规则
div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...
- 【CSS】class和id命名规则
说明,本篇内容为书籍<高流量网站CSS开发技术>的学习总结,文字出自书本 书不错,推荐阅读学习 也可参阅网上的博文 原载:彬Go链接:http://blog.bingo929.com/cs ...
- CSS的Class以及ID选择器
9.CSS的Class以及ID选择器 id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用. 同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素, ...
- css的class, id等常用命名规则
CSS的class.id.css文件名的常用命名规则 (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sid ...
- wordpress默认css样式class和id集合
你是否想过如何设计WordPress主题的不同元素?每个主题都不一样,但是有一些CSS的class和id是由WordPress生成的.我们将逐一介绍一些最重要的默认WordPress样式,方便初学者快 ...
- 平常我们是如何区分css中class和id之间有什么区别的?
我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用 ...
- CSS选择器中类和ID选择器的区别
类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选 ...
随机推荐
- leetcode 124. Binary Tree Maximum Path Sum ----- java
Given a binary tree, find the maximum path sum. For this problem, a path is defined as any sequence ...
- 作业:用HTML制作邮箱登陆界面
<body leftmargin="200" rightmargin="200"> <font size="45" > ...
- OOP作业
1,定义一个水果类(fruit),水果类中的有[属性]:颜色(color).价格(price).重量(weigth),再定义一个<测试类>,创建一个苹果(apple)的对象, 颜色是&qu ...
- HDU-1011 Starship Troopers (树形DP+分组背包)
题目大意:给一棵有根带点权树,并且给出容量.求在不超过容量下的最大权值.前提是选完父节点才能选子节点. 题目分析:树上的分组背包. ps:特判m为0时的情况. 代码如下: # include<i ...
- poj1456 结构体排序+贪心
题意:给出很多商品,每个商品有价值和出售期限,只能在期限内出售才能获取利润,每一个单位时间只能出售一种商品,问最多能获得多少利润. 只需要按照优先价值大的,其次时间长的排序所有物品,然后贪心选择,从它 ...
- RecyclerView使用完全解析
http://blog.csdn.net/a396901990/article/details/40153759 Android RecyclerView 使用完全解析 体验艺术般的控件 通过这个控件 ...
- ARTICLES
https://blogs.msdn.microsoft.com/tess/2005/12/20/things-to-ignore-when-debugging-an-asp-net-hang/ ht ...
- Valgrind使用[转]
简介 调试程序有很多方法,例如向屏幕上打印消息,使用调试器,或者只需仔细考虑程序如何运行,并对问题进行有根有据的猜测. 在修复 bug 之前,首先要确定在源程序中的位置.例如,当一个程序产生崩溃或生成 ...
- unity Dotween插件的简单介绍及示例代码
unity里面做插值动画的插件有许多,比较常见的有itween.hotween.dotween.根据大家的反馈和实际体验来说,dotween插件在灵活性.稳定性.易用性上都十分突出.这里简单介绍下它的 ...
- LINQ to SQL 系列 如何使用LINQ to SQL插入、修改、删除数据
http://www.cnblogs.com/yukaizhao/archive/2010/05/13/linq_to_sql_1.html LINQ和 LINQ to SQL 都已经不是一个新事物了 ...