CSS代码结构中id及class类命名探究

开发 前端
这里向大家描述一下CSS代码结构中id及class类命名,id我们通常用来标记结构性的元素,如上面提到的头部导航、侧边栏、内容区域等,而类class非常灵活,你可以将它应用于页面上任意数量的元素。

你对CSS代码结构中id及class类命名规则是否熟悉,这里和大家分享一下,不管你用id还是class,请不要让它的名字与它的表现有任何的关联,应该让这个名字更有意义。

CSS代码结构id及class类命名探究

在前面我们讲了《根基的建立使有意义的html标记》。这些有意义并且具有良好CSS代码结构的标签标记为我们提供了非常好的基础,但是这些可能元素毕竟是有限的。不可能仅用这些元素就构成完整的网页代码。至少这些标签标记,并不能区分,哪里是头部导航,哪里是侧边栏,哪里是内容区域。

  我们现在解决办法就是使用现有的元素,通过给他们id或class而得到额外的信息。这样就使得文档具有清晰的结构。比如,我们通过一个简单的无序列表UL,可以创建出一个导航元素的信息:

ExampleSourceCode

  1. <ulidulid="nav"> 
  2.  
  3. <li><ahrefahref="http://www.52css.com/">Div+CSS教程</a></li> 
  4. <li><ahrefahref="http://www.52css.com/">CSS布局实例</a></li> 
  5. <li><ahrefahref="http://www.52css.com/">CSS2.0教程</a></li> 
  6. <li><ahrefahref="http://www.52css.com/">CSS酷站欣赏</a></li> 
  7. <li><ahrefahref="http://www.52css.com/">CSS模板下载</a></li> 
  8. </ul> 
  9.  

   我们一直强调以提醒你的注意,id是页面上单独的元素,必须是唯一的,这样的益处在于程序或脚本的控制与选择。id我们通常用来标记结构性的元素,如上面提到的头部导航、侧边栏、内容区域等。

id  一个id只能应用于同一个页面上的一个元素。从理论上说,不同的页面,完全可以使用同一个id。例如列表页面的标签与内容显示页面的标题,或者是首页的联系方式与内页的联系方式。需要你注意的是,这样确实能省事简化代码提高效率。但如果将来需要根据页面不同单独定义他们的外观,你将会遇到棘手的问题。我们建议你建立不同的id,但在CSS代码编写时,可以运用群组选择符进行外观的设置,即使有变化,也可以非常方便的区分开来。例如:

  列表页的标题:<pid="listtitle">www.52css.com</p>
  内容页的标题:<pid="showtitle">www.52css.com</p>
  CSS则可以这样写:#listtitle,#showtitle{font-size:1.2em;color:red;...}

类class 

 类class非常灵活,你可以将它应用于页面上任意数量的元素。类class非常适合相似条目的定义。例如,我们需要在列表页标识出文章的作者,我们不必为每一个人建立id。我们只需要建立类author分配给每一位作者即可。

  需要注意的是,不管你用id还是class,请不要让它的名字与它的表现有任何的关联,应该让这个名字更有意义。例如我们在处理侧边栏时,或许它是在左侧,你会给它一个leftsider的名字,但如果我们经过运行发现它处于右侧更恰当。此时leftsider居于了右侧,就显得不是非常得体与恰当了。比如我们希望我们的关键内容加粗显示,或许你会建立一个class类命名为bold800。如果我们将来将它不加粗而是赋予不同的色彩,这个类名也不合适了。

  我们说说命名的大小写问题,我们的id名与class类名,一般情况下是不区分大小写的,但不是一个好习惯。我们如果使用XHTML那么id名与class类名是区分大小写的,如果是使用HTML,那么大小写是没有区别的。我们处理这样问题的方法就是全部采用小写,当然,你也可以按你的习惯,但要注意与开发团队的其他成员协调。

  我们的id与class类都是比较灵活的东西,只要你愿意,你爱怎么用就怎么用,但问题就出现了。我们的页面代码中到处充斥着这些东西,我们的出发点是想更加精确的选择和控制我们的页面元素,但这好象又回到了表格时代,一切变的难以理解和不可阅读,例如下面的代码:

ExampleSourceCode

HTML:

  1. <dividdivid="about52css"> 
  2. <h1classh1class="title">Div+CSS教程www.52css.com</h1> 
  3. <pclasspclass="abouttext">52css.com是一个非常专业的CSS站点</p> 
  4. <pclasspclass="abouttext">52css.com的Div+CSS教程栏目有丰富的教程</p> 
  5. </div> 
  6.  

 CSS:

  1. .title{font-size:13px;color:#f60;}  
  2. .abouttext{font-size:12px;color:#666;}  
  3.  

  我们进行一下优化,去掉一些不必要的命名。代码如下:

ExampleSourceCode

HTML:

  1. <dividdivid="about52css"> 
  2. <h1>Div+CSS教程www.52css.com</h1> 
  3. <p>52css.com是一个非常专业的CSS站点</p> 
  4. <p>52css.com的Div+CSS教程栏目有丰富的教程</p> 
  5. </div> 
  6.  

 CSS:

  1. #about52cssh1{font-size:13px;color:#f60;}  
  2. #about52cssp{font-size:12px;color:#666;}  
  3.  

   优化后的方式代码更加的简洁,我们只需要通过选择器准确的找到样式的应用目标就可以了。不必过份的依赖于id名或class类名。我们只有在不得已,不得不使用id或class标识的时候才使用它们。正常情况下,我们的文件只需要几个或十来个id名与class名就完全能满足需要了。如果你发现你的这些名字很多。要么是你就是有多id多class结合症,要么就是你的HTML文档的结构出现了问题。我们将在以后52CSS.com的教程文章中,详细的讲解选择符的相关知识与技术,让你可以非常简单而精确的选择到样式的作用目标。

【编辑推荐】

  1. CSS中id与class使用原则
  2. 如何使用CSS框架这把双刃剑?
  3. CSS中font-size属性值四大种类
  4. CSS中id与class命名规则及编码最佳习惯
  5. 专家推荐 DIV CSS表单布局的五个小技巧
责任编辑:佚名 来源: 52css.com
相关推荐

2010-09-14 15:24:49

CSSIDClass

2010-09-08 16:49:05

CSSclassid

2010-09-01 13:44:23

idclassCSS

2010-08-27 08:53:18

CSS类id命名DIV

2010-08-27 09:51:25

idclassCSS

2010-08-16 12:54:53

DIVCSS

2010-08-24 15:20:02

CSSidclass

2010-08-30 10:52:39

CSSclassid

2010-08-26 12:47:15

CSSclass

2010-08-23 10:57:14

CSSclassid

2010-09-01 12:43:47

CSSidclass

2010-09-03 16:16:23

CSSidclass

2010-09-08 15:44:17

CSSidclass

2009-04-12 09:11:03

Symbian诺基亚移动OS

2009-04-12 09:13:51

Symbian诺基亚移动OS

2009-04-12 09:12:34

Symbian诺基亚移动OS

2010-08-23 14:16:17

DIVclassid

2010-09-10 10:42:07

idclassDIV CSS

2010-09-06 09:57:01

CSS类选择器CSS

2010-08-27 09:29:40

CSSbehavior
点赞
收藏

51CTO技术栈公众号