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

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

古雷港ssl适用于网站、小程序/APP、API接口等需要进行数据传输应用场景，ssl证书未来市场广阔！成为成都创新互联公司的ssl证书销售渠道，可以享受市场价格4-6折优惠！如果有意向欢迎电话联系或者加微信：18982081108（备注：SSL证书合作）期待与您的合作！

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

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

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

ExampleSourceCode

 
 
 
      
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  4. Div+CSS教程
    5.    
  
  
  6. CSS布局实例
    7.    
  
  
  8. CSS2.0教程
    9.    
  
  
  10. CSS酷站欣赏
    11.    
  
  
  12. CSS模板下载
    13.    
  
  
  13.  
    14.   
  
  
  14.  
    15.

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

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

列表页的标题：www.52css.com


　　内容页的标题：www.52css.com


　　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.  
    2.   
  
  
  2. Div+CSS教程www.52css.com 
    3.   
  
  
  3. 52css.com是一个非常专业的CSS站点
     
    4.   
  
  
  4. 52css.com的Div+CSS教程栏目有丰富的教程
     
    5.
 
  •  

    •  CSS：

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

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

    ExampleSourceCode

    HTML：

     
 
 
        
  
  
    1.  
      2.   
  
  
    2. Div+CSS教程www.52css.com
       
      3.   
  
  
    3. 52css.com是一个非常专业的CSS站点
       
      4.   
  
  
    4. 52css.com的Div+CSS教程栏目有丰富的教程
       
      5.
     
  •  

    •  CSS：

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

     　　优化后的方式代码更加的简洁，我们只需要通过选择器准确的找到样式的应用目标就可以了。不必过份的依赖于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表单布局的五个小技巧

    标题名称：CSS代码结构中id及class类命名探究
    地址分享：http://www.shufengxianlan.com/qtweb/news29/296479.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    域名注册知识

    各行业网站

    成都微商城　　 　成都电信光华数据中心　　 　品牌网站建设　　 　成都小程序开发　　 　bgp多线机房托管　　 　网站收录　　 　娃娃鱼鱼苗　　 　四川内江电信机房　　 　鳄鱼养殖　　 　成都装饰装修　　 　四川审计公司　　 　无边发光字制作　　 　成都IDC机房托管　　 　吉安网站建设　　 　东电技服　　 　网站建设　　 　遂宁做网站　　 　青年旅行社　　 　乐山服务器托管　　 　电信成都枢纽中心