Web开荒职员可以经由过程设立CSS类class及id俗称并应用这些名称来对div以及另外的格局页面元素进行标识。对启迪人员来讲,在定名从头定义XHTML标志(tags)的CSS selectors时,必须担保其与预约义的标记切确立室,但就类以及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/j52624.shtml