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站点晋级带来方便，尤其当必要在由差距启迪职员在不合工夫所垦荒站点中换来换去工作的时辰。

如需转载，请注明文章出处和来源网址：http://www.divcss5.com/jiqiao/j52536.shtml