当前位置：首页 -> 网页设计 -> HTML/CSS -> 对CSS类及id的规范化命名

对CSS类及id的规范化命名

时间： 2021-07-31 作者：daque

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站点晋级带来简单，更加当须要在由各别开拓职员在各别功夫所开拓站点中换来换去处事的功夫。

对CSS类及id的规范化命名

相关推荐

推荐下载

热门阅览

最新排行