作者:DarkZone
链接:https://www.zhihu.com/question/19550864/answer/23440690
来源:知乎

以下摘自《精通CSS:高级Web标准解决方案第2版》,希望对你有用。

常常很难决定一个元素应该使用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?的更多相关文章

  1. CSS的class、id、css文件名的常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header       内容:content/container       尾:footer   ...

  2. CSS类选择器和ID选择器

    CSS类选择器和ID选择器皆允许以一种独立于文档元素的方式来指定样式,同时二者皆区分大小写. 区别如下: 第一:在同一个页面内,不允许有相同名字的id对象出现,但是允许相同名字的class 第二:当页 ...

  3. div+css样式表的id,class的常用命名规则

    div+css样式表的id的常用命名规则如下表所示: div+css样式表的id的常用命名规则如下表所示: 页头 header 登录条 loginBar 标志 logo 侧栏 sideBar 广告 B ...

  4. 【CSS】class和id命名规则

    说明,本篇内容为书籍<高流量网站CSS开发技术>的学习总结,文字出自书本 书不错,推荐阅读学习 也可参阅网上的博文 原载:彬Go链接:http://blog.bingo929.com/cs ...

  5. CSS的Class以及ID选择器

    9.CSS的Class以及ID选择器 id和class的不同指出在于一个页面同一个ID只能只有一次,而class可以无限制使用. 同样,你可以在html选择器后面使用一个选择器来指定特殊HTML元素, ...

  6. css的class, id等常用命名规则

    CSS的class.id.css文件名的常用命名规则        (一)常用的CSS命名规则 头:header 内容:content/container 尾:footer 导航:nav 侧栏:sid ...

  7. wordpress默认css样式class和id集合

    你是否想过如何设计WordPress主题的不同元素?每个主题都不一样,但是有一些CSS的class和id是由WordPress生成的.我们将逐一介绍一些最重要的默认WordPress样式,方便初学者快 ...

  8. 平常我们是如何区分css中class和id之间有什么区别的?

    我们平常在用DIV+CSS制作html网页页面时,常会用到class 和id来选择调用CSS样式属性.对学习CSS的新手来说class和id可能比较模糊,同时不知道什么时候该用class,什么时候又用 ...

  9. CSS选择器中类和ID选择器的区别

    类和ID选择器的区别 学习了类选择器和ID选择器,我们会发现他们之间有很多的相似处,是不是两者可以通用呢?我们不要着急先来总结一下他们的相同点和不同点: 相同点:可以应用于任何元素不同点: 1.ID选 ...

随机推荐

  1. 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 ...

  2. 作业:用HTML制作邮箱登陆界面

    <body leftmargin="200" rightmargin="200"> <font size="45" > ...

  3. OOP作业

    1,定义一个水果类(fruit),水果类中的有[属性]:颜色(color).价格(price).重量(weigth),再定义一个<测试类>,创建一个苹果(apple)的对象, 颜色是&qu ...

  4. HDU-1011 Starship Troopers (树形DP+分组背包)

    题目大意:给一棵有根带点权树,并且给出容量.求在不超过容量下的最大权值.前提是选完父节点才能选子节点. 题目分析:树上的分组背包. ps:特判m为0时的情况. 代码如下: # include<i ...

  5. poj1456 结构体排序+贪心

    题意:给出很多商品,每个商品有价值和出售期限,只能在期限内出售才能获取利润,每一个单位时间只能出售一种商品,问最多能获得多少利润. 只需要按照优先价值大的,其次时间长的排序所有物品,然后贪心选择,从它 ...

  6. RecyclerView使用完全解析

    http://blog.csdn.net/a396901990/article/details/40153759 Android RecyclerView 使用完全解析 体验艺术般的控件 通过这个控件 ...

  7. ARTICLES

    https://blogs.msdn.microsoft.com/tess/2005/12/20/things-to-ignore-when-debugging-an-asp-net-hang/ ht ...

  8. Valgrind使用[转]

    简介 调试程序有很多方法,例如向屏幕上打印消息,使用调试器,或者只需仔细考虑程序如何运行,并对问题进行有根有据的猜测. 在修复 bug 之前,首先要确定在源程序中的位置.例如,当一个程序产生崩溃或生成 ...

  9. unity Dotween插件的简单介绍及示例代码

    unity里面做插值动画的插件有许多,比较常见的有itween.hotween.dotween.根据大家的反馈和实际体验来说,dotween插件在灵活性.稳定性.易用性上都十分突出.这里简单介绍下它的 ...

  10. LINQ to SQL 系列 如何使用LINQ to SQL插入、修改、删除数据

    http://www.cnblogs.com/yukaizhao/archive/2010/05/13/linq_to_sql_1.html LINQ和 LINQ to SQL 都已经不是一个新事物了 ...