web开发中对css类及id的规范化命名--.

《web开发中对css类及id的规范化命名--.》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、Web开发中对CSS类及id的规范化命名>>.L标记（tags）的CSSselectors时，必须保证其与预定义的标记准确匹配，但就类以及id选择器名称而言，则仁者见仁，智者见智。然而随心所欲的为这些类以及id命名则并不是个好的习惯。　　在阅读了由AndyClarke（ofStuffandNonsenseandAllThatMalarkey）以及EricMeyer所撰写的关于CSS类以及id命名规范的系列文章之后，我开始思考在自己的L类和id的有效命名方式。这些词汇简单并且能够使人顾名思义，因此满足了标识页面元素以及相应的CSS样式的

2、需要。　　但问题是这样的名称同页面内容的特定表达方式相关联。这些命名参考了某种特定页面布局中的页面元素位置，因此在这样的布局之外使用就会显得不合适甚至造成理解混乱。同时，这些命名没有涉及文档内容的结构。因此，下面给出了对CSS类以及ID命名更好的方法。　　结构化命名　　结构化的标记意味着表达方式/位置信息同内容的完全分离——这其中包括出现在标记（markup）中的类和id名称。　　有标记的相关信息都是用来描述文档的结构而不是外观。这样的特点使得我们可以通过简单的改变CSS的方式来对不同外观格式下的内容（content）以及标记（mar

3、kup）进行重用。当你理解这种方式时，很容易就可以发现采用页面位置来为类以及id命名的方式在处理如音频（audio）等外观格式上显得非常不合适。因此，应当根据在文档中的使用目的而非出现位置来对类以及id进行结构化命名。　　可以按照如下所示的结构化方式来对类以及id名称命名：　　branding　　main-nav　　subnav　　main-content　　sidebar　　这些名字同直观命名方式一样非常易懂，但他们描述了页面元素的作用而非位置。这使得代码更加符合使用纯粹的结构化标记（structuralmarkup）的初衷，即开发

4、人员可以在不改变标记的情况下对各种各样媒体下的显示格式进行处理。　　即使你不打算在其他的媒体上对n移动到页面左边后所带来的混乱。对divsidebar的采用这样的命名方式就显得更加适当，因为无论它出现在页面的哪一边，这个名字仍然对开发人员来说直观易懂。　　惯例　　AndyClarke分析了40份由推崇标准化Web设计理念的开发人员所设计的Web站点的源代码。尽管类以及id名称很不统一，但是还是发现了一些频繁出现的常用名称。这里给出了最常用类/id名称的示例列表：　　header　　content　　nav　　sidebar　　foot

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