Web开发中对CSS类及id的规范化命名

css|web|规范|规范化

  Web开发人员可以通过创建CSS类及id名称并使用这些名称来对divs以及其他的格式页面元素进行标识。对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。

  在阅读了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric Meyer所撰写的关于CSS类以及id命名规范的系列文章之后,我开始思考在自己的Web站点设计过程中对类以及ids的命名方式。

  直观命名
  当在设计Web页面以及需要对一个div进行标识的时候,最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。这种方法使得类以及id的名称如下面所示:

  top-panel

  horizontal-nav

  left-side

  center-column

  right-col

  这些是CSS以及XHTML类和id的有效命名方式。这些词汇简单并且能够使人顾名思义,因此满足了标识页面元素以及相应的CSS样式的需要。

  但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置,因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时,这些命名没有涉及文档内容的结构。因此,下面给出了对CSS类以及ID命名更好的方法。

  结构化命名
 
 
  结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记(markup)中的类和id名称。

  有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容(content)以及标记(markup)进行重用。当你理解这种方式时,很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频(audio)等外观格式上显得非常不合适。因此,应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。

  可以按照如下所示的结构化方式来对类以及id名称命名:

  branding

  main-nav

  subnav

  main-content

  sidebar

  这些名字同直观命名方式一样非常易懂,但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记(structural markup)的初衷,即开发人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。

  即使你不打算在其他的媒体上对Web页面进行格式修改,使用结构化命名方式还可以帮助你在日后的站点升级或重新设计中更为轻松。例如,结构化命名避免了当一个div同id right-column移动到页面左边后所带来的混乱。对div sidebar的采用这样的命名方式就显得更加适当,因为无论它出现在页面的哪一边,这个名字仍然对开发人员来说直观易懂。

  惯例
  Andy Clarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一,但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表:
 

  header

  content

  nav

  sidebar

  footer

  如果要查看完整的列表,可以看看最常见命名惯例表

  这些常见的类以及id名称是否标志着一种标准的诞生或是普遍接受惯例的形成呢?尽管这是我所希望的,但我并不这么认为。我的确希望能够看见一整套对于我们每天都可以看到的常用页面元素的命名标准。同时,使用标准化的命名方式可以使得寻找页面元素以及对Web站点升级带来方便,尤其当需要在由不同开发人员在不同时间所开发站点中换来换去工作的时候。

时间: 2024-10-01 13:49:59

Web开发中对CSS类及id的规范化命名的相关文章

CSS类及id的规范化命名

css|规范|规范化 Web开发人员可以通过创建CSS类及id名称并使用这些名称来对divs以及其他的格式页面元素进行标识.对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智.然而随心所欲的为这些类以及id命名则并不是个好的习惯.     在阅读了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric M

对CSS类及id的规范化命名

css|规范|规范化 Web开发人员可以通过创建CSS类及id名称并使用这些名称来对divs以及其他的格式页面元素进行标识.对开发人员来说,在命名重新定义XHTML标记(tags)的CSS selectors时,必须保证其与预定义的标记准确匹配,但就类以及id选择器名称而言,则仁者见仁,智者见智.然而随心所欲的为这些类以及id命名则并不是个好的习惯.     在阅读了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric M

Web 开发中 20 个很有用的 CSS 库

在过去的几年中,CSS已经成为一大部分开发者和设计者的最爱,因为它提供了一系列功能和特性.每个月都有无数个围绕CSS的工具被开发者发布以简化WEB开发.像CSS 库,框架,应用这样的工具能够为开发者做很多事,而且可以使开发者创造出创新立异的WEB应用. 在这篇文件章中我们找到了一系列对开发者有用的CSS库,它们能帮助开发者在一定的期限内取得有创造性和创新性的成果.我们希望这个列表能有助于您的开发并为您提供方便.尽情享受吧! 1. Kite Kite是一个灵活的布局助手CSS库.Kite使用inl

WEB开发中Spring AOP实际应用一例

web   在WEB开发中,用户对网页的访问权限检查是一个重要的环节.以STRUST为例,我们需要在Action的excute方法中编写相关的代码(一般是调用基类的函数),也很显然,在每个Action中这是一种重复劳动. 如果我们在excute运行之前,能够自动去调用基类的权限检查函数,这无疑是个好的解决办法.AOP就为我们提供了这样一种解决方法. 下面以一个简化的实例介绍实现的办法. 首先我们做一个接口: public interface CheckInterface {  public ab

对Web开发中前端框架与前端类库的一些思考

  这篇文章主要介绍了对Web开发中前端框架与前端类库的一些思考,本文讲解了前端框架的理解误区.前端框架与前端类库的区别.前端MVC框架思想等内容,需要的朋友可以参考下 说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技术选型和架构设计当中,脱离网站业务发展的实际,一味的追求时髦新技术,可能会适得其反,将网站发展引入崎岖小道.就好像一个日均pv只有

使用阿里云对Web开发中的资源文件进行CDN加速的深入研究和实践

提示:阅读本文需提前了解的相关知识 1.阿里云(https://www.aliyun.com) 2.阿里云CDN(https://www.aliyun.com/product/cdn) 3.阿里云OSS(https://www.aliyun.com/product/oss) 4.HTTPS(http://baike.baidu.com/view/14121.htm) 阅读目录结构 引: 一.准备工作 二.整体功能结构 三.具体实现步骤 四.关键点和问题处理 五.延伸与扩展 六.总结与思考 引:

Web开发中的文件上传组件uploadify的使用

在Web开发中,有很多可以上传的组件模块,利用HTML的File控件的上传也是一种办法,不过这种方式,需要处理的细节比较多,而且只能支持单文件的操作.在目前Web开发中用的比较多的,可能uploadify(参考http://www.uploadify.com/)也算一个吧,不过这个版本一直在变化,他们的脚本调用也有很大的不同,甚至调用及参数都一直在变化,很早的时候,那个Flash的按钮文字还没法变化,本篇随笔主要根据项目实际,介绍一下3.1版本的uploadify的控件使用,这版本目前还是最新的

WEB设计技巧:Web开发中经常使用的网站和Web App

文章描述:Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库.代码库.插件库.配色方案和测试工具.他同时指出,Web开发环境将慢慢转向云端. Web用户体验师Jake Rocheleau撰写了一篇文章分享他在Web开发中经常使用的网站和Web App,其中包含各类字体库.代码库.插件库.配色方案和测试工具.他同时指出,Web开发环境将慢慢转向云端. CodeVisually是一个开源项目.在它的分类目录下有各种插件.

Asp.net,IBatis For .Net,DAOFactory在Web开发中的数据表示

asp.net|web|数据 摘要: 本文谈论的结合Asp.net,IBatis,DAOFactory谈Web开发中的数据表示,展现在ASP.Net开发中各层怎么来组织数据. IBatis For .Net是一个功能强大实用的SQL Map工具,不是ORM工具.它是将SQL语句映射成.NET对象,同时将这个.Net对象与ASP.NET页面中的数据(ASP.NET中Page DataSource我称之为FormBean吧(与J2EE中的FormBean不是同一个概念))结合起来,这样就可以达到这个