CSS制做网页页面的类和ids的取名

日期:2020-10-28 类型:科技新闻 

关键词:免费自助建站,手机建站平台,wap建站,免费自助建站平台,H5网站,H5模板建站


Web开发设计人员能够根据建立CSS类及id名字并应用这些名字来对divs和别的的文件格式网页页面元素开展标志。对开发设计人员来讲,在取名再次界定XHTML标识(tags)的CSS selectors时,务必确保其与预订义的标识精确配对,但就类和id挑选器名字而言,则仁者见仁,智者见智。但是随心所
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网页页面和必须对1个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
这些姓名同直观取名方法1样十分易懂,但她们叙述了网页页面元素的功效而非部位。这使得编码更为合乎应用纯碎的构造化标识(structural markup)的初衷,即开发设计人员能够在不更改标识的状况下对各种各样各种各样新闻媒体下的显示信息文件格式开展解决。
即便你不准备在别的的新闻媒体上对Web网页页面开展文件格式改动,应用构造化取名方法还能够协助你在往后的站点升級或再次设计方案中更加轻轻松松。比如,构造化取名防止了当1个div同id right-column挪动到网页页面左侧后所带来的错乱。对div sidebar的选用这样的取名方法就显得更为适度,由于不管它出現在网页页面的哪1边,这个姓名依然对开发设计人员来讲直观易懂。
国际惯例
Andy Clarke剖析了40份由青睐规范化Web设计方案理念的开发设计人员所设计方案的Web站点的源码。虽然类和id名字很不统1,可是還是发现了1些经常出現的常见名字。这里得出了最常见类/id名字的示例目录:
header
content
nav
sidebar
footer
假如要查询详细的目录,能够看看最多见取名国际惯例表
这些普遍的类和id名字是不是标示着1种规范的诞生或是广泛接纳国际惯例的产生呢?虽然这是我所期待的,但我其实不这么觉得。我确实期待可以看见1整套针对大家每日都可以以看到的常见网页页面元素的取名规范。另外,应用规范化的取名方法可使得找寻网页页面元素和对Web站点升級带来便捷,特别当必须在由不一样开发设计人员在不一样時间所开发设计站点中换来换去工作中的情况下。