XHTML中id与class的使用原则与技巧

作者:小毅 来源:毅博客 时间:2007-12-17 13:07:00 

今天的这篇文章是讲XHTML中的细节部分的,这篇续述的主题就是ID与CLASS怎么用,在标题中有提及使用原则与技巧,这里的使用原则与技巧是我的经验总结。

相关文章阅读:表单name与id的区别和相似之处class和id命名探讨div中class与id的区别及应用

ID与CLASS的使用原则

据说W3C对于ID与CLASS的设定是ID具有唯一性,CLASS具有普遍性。

所以我们这里的使用原则也是依据这一特性建立的。ID是不能重复的,所以在XHTML的结构中,大结构一定是用ID。比如标志、导航、主体内容、版权。这些呢接我自己制定的规范命名为#logo , #nav , #content , #copyright 这些是雷打不动的命名。

有人说布局排版用ID,配色背景用CLASS,其实这是不正确的,ID与布局排版没有直接关系,CLASS与配色也下是对等的。有人呢为了麻烦全都用ID或是全都用CLASS,全都用CLASS呢还有可理解,全都用ID就不正常了,这有悖ID唯一性。如果每个ID都不一样,那非累死不可。我通过实践总结的使用原则是:ID需要具有唯一性,并且尽量在外围使用。而CLASS具有可重复性,并且尽量在结构内部使用。这样做的好处是有利于网站代码的后期维护与修改,这样的做法就会让所有的CLASS都成为ID的子级或是孙级。你可以有两个儿子但你能有两个爸爸吗,就是这个道理。

在我们写CSS的时候可以写成这样 #father .child  {…} 尽量不要让Class包含ID,.father #child  {…}如果写成这样显得有点可笑 。当然这也不是铁定的,特殊情况需要特殊对待嘛。但是通常情况下这种形式的必要性不大。

以上就是ID与CLASS使用原则,归总起来一句话:ID是唯一的并是父级的,CLASS是可以重复的并是子级的。

ID与CLASS的使用技巧

  1. 子级的命名的包含父命名中的部分为开头。这样方便在编写CSS时明确层次关系。

  2. CLASS中的子级最好不用ID。当然特殊情况特殊对待。

  3. CLASS的命名最好命名用大小写合用。例 .newMovie 这样的写法与第一条结合起来使用明确关系最合适。要需要注意的是IE以外的浏览器对于大小写是很敏感的。还有就是一定要以字母开头。

其实上面讲的都是一些大家都明白的内容,只是我捡了个漏先写下来算是一个总结。希望大家对于ID与CLASS的使用提出自己的新观点新思路。一起总结出最适合也最有效率的规范来。

标签:id,class,xhtml
0
投稿

猜你喜欢

  • 使用pip下载时提示"You are using pip version 8.1.1, however version 22.1 is available."错误解决

    2023-08-02 18:04:49
  • 关于mysql left join 查询慢时间长的踩坑总结

    2024-01-23 14:20:29
  • mysql中写判断语句的方法总结

    2024-01-21 15:17:30
  • python编写朴素贝叶斯用于文本分类

    2022-01-29 18:45:51
  • Python之文字转图片方法

    2022-02-12 07:11:10
  • 使用vue3实现一个人喵交流小程序

    2024-04-27 16:03:21
  • MooTools的Cookie类太“自作聪明”了

    2008-11-13 12:59:00
  • python中如何使用函数改变list

    2022-06-04 13:38:38
  • python 爬取英雄联盟皮肤图片

    2021-08-10 10:16:06
  • 某一公司的ASP面试题

    2011-09-15 20:50:20
  • Pytorch:dtype不一致问题(expected dtype Double but got dtype Float)

    2023-07-05 21:57:33
  • pytorch:model.train和model.eval用法及区别详解

    2022-07-13 19:22:51
  • 聚族索引、非聚族索引、组合索引的含义和用途

    2010-07-02 21:51:00
  • Python闭包与闭包陷阱举例详解

    2023-07-05 09:40:10
  • Vue3中defineEmits、defineProps 不用引入便直接用

    2024-05-09 09:53:01
  • python sys模块sys.path使用方法示例

    2023-01-12 22:52:15
  • python实现Dijkstra静态寻路算法

    2021-06-10 07:41:09
  • Javascript简写条件语句(推荐)

    2023-09-01 04:10:25
  • Python常用内置函数的使用教程详解

    2021-11-11 21:23:50
  • python模块的安装以及安装失败的解决方法

    2023-09-14 06:33:04
  • asp之家 网络编程 m.aspxhome.com