CSS类class及id的规范化命名

Web启示人员可以颠末确立CSS类class及id称说并使用这些称谓来对div以及此外的名堂页面元素发展标识。对开荒职员来讲，在命名重新界说XHTML标识表记标帜（tags）的CSS sele首席技术官rs时，必需保证其与预界说的符号正确立室，但就类以及id抉择器称号而言，则仁者见仁，智者见智。然而为所欲为的为这些类以及id定名则并非个好的习气。

在涉猎了由Andy Clarke（of Stuff and Nonsense and All That Malarkey）以及Eric Meyer所撰写的对于CSS类以及id定名规范的系列文章之后，我初步思忖在自己的Web站点设计过程中对类以及id的命名方式。

直观命名

当在设计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站点晋级带来方便，尤其当需要在由分歧开荒人员在分歧工夫所开发站点中换来换去任务的时辰。