中文字幕日韩精品一区二区免费_精品一区二区三区国产精品无卡在_国精品无码专区一区二区三区_国产αv三级中文在线

對(duì)CSS的Class及Id的規(guī)范化命名

2023-12-19    分類: 網(wǎng)站建設(shè)

Web開(kāi)發(fā)人員可以通過(guò)創(chuàng)建CSS的Class及id名稱并使用這些名稱來(lái)對(duì)div以及其他的格式頁(yè)面元素進(jìn)行標(biāo)識(shí)。對(duì)開(kāi)發(fā)人員來(lái)說(shuō),在命名重新定義XHTML標(biāo)記(tags)的CSS selectors時(shí),必須保證其與預(yù)定義的標(biāo)記準(zhǔn)確匹配,但就類以及id選擇器名稱而言,則仁者見(jiàn)仁,智者見(jiàn)智。然而隨心所欲的為這些類以及id命名則并不是個(gè)好的習(xí)慣。

在閱讀了由Andy Clarke(of Stuff and Nonsense and All That Malarkey)以及Eric Meyer所撰寫(xiě)的關(guān)于CSS的Class以及id命名規(guī)范的系列文章之后,我開(kāi)始思考在自己的Web站點(diǎn)設(shè)計(jì)過(guò)程中對(duì)類以及ids的命名方式。

直觀命名

當(dāng)在設(shè)計(jì)Web頁(yè)面以及需要對(duì)一個(gè)div進(jìn)行標(biāo)識(shí)的時(shí)候,最自然的想法就是使用可以描述元素所在頁(yè)面位置的詞匯來(lái)對(duì)其命名。這種方法使得類以及id的名稱如下面所示:

top-panel

horizontal-nav

left-side

center-column

right-col

這些是CSS以及XHTML類和id的有效命名方式。這些詞匯簡(jiǎn)單并且能夠使人顧名思義,因此滿足了標(biāo)識(shí)頁(yè)面元素以及相應(yīng)的CSS樣式的需要。

但問(wèn)題是這樣的名稱同頁(yè)面內(nèi)容的特定表達(dá)方式相關(guān)聯(lián)。這些命名參考了某種特定頁(yè)面布局中的頁(yè)面元素位置,因此在這樣的布局之外使用就會(huì)顯得不合適甚至造成理解混亂。同時(shí),這些命名沒(méi)有涉及文檔內(nèi)容的結(jié)構(gòu)。因此,下面給出了對(duì)CSS類以及ID命名更好的方法。

結(jié)構(gòu)化命名

結(jié)構(gòu)化的標(biāo)記意味著表達(dá)方式/位置信息同內(nèi)容的完全分離——這其中包括出現(xiàn)在標(biāo)記(markup)中的類和id名稱。

有標(biāo)記的相關(guān)信息都是用來(lái)描述文檔的結(jié)構(gòu)而不是外觀。這樣的特點(diǎn)使得我們可以通過(guò)簡(jiǎn)單的改變CSS的方式來(lái)對(duì)不同外觀格式下的內(nèi)容(content)以及標(biāo)記(markup)進(jìn)行重用。當(dāng)你理解這種方式時(shí),很容易就可以發(fā)現(xiàn)采用頁(yè)面位置來(lái)為類以及id命名的方式在處理如音頻(audio)等外觀格式上顯得非常不合適。因此,應(yīng)當(dāng)根據(jù)在文檔中的使用目的而非出現(xiàn)位置來(lái)對(duì)類以及id進(jìn)行結(jié)構(gòu)化命名。

可以按照如下所示的結(jié)構(gòu)化方式來(lái)對(duì)類以及id名稱命名:

branding

main-nav

subnav

main-content

sidebar

這些名字同直觀命名方式一樣非常易懂,但他們描述了頁(yè)面元素的作用而非位置。這使得代碼更加符合使用純粹的結(jié)構(gòu)化標(biāo)記(structural markup)的初衷,即開(kāi)發(fā)人員可以在不改變標(biāo)記的情況下對(duì)各種各樣媒體下的顯示格式進(jìn)行處理。

即使你不打算在其他的媒體上對(duì)Web頁(yè)面進(jìn)行格式修改,使用結(jié)構(gòu)化命名方式還可以幫助你在日后的站點(diǎn)升級(jí)或重新設(shè)計(jì)中更為輕松。例如,結(jié)構(gòu)化命名避免了當(dāng)一個(gè)div同id right-column移動(dòng)到頁(yè)面左邊后所帶來(lái)的混亂。對(duì)div sidebar的采用這樣的命名方式就顯得更加適當(dāng),因?yàn)闊o(wú)論它出現(xiàn)在頁(yè)面的哪一邊,這個(gè)名字仍然對(duì)開(kāi)發(fā)人員來(lái)說(shuō)直觀易懂。

慣例

Andy Clarke分析了40份由推崇標(biāo)準(zhǔn)化Web設(shè)計(jì)理念的開(kāi)發(fā)人員所設(shè)計(jì)的Web站點(diǎn)的源代碼。盡管類以及id名稱很不統(tǒng)一,但是還是發(fā)現(xiàn)了一些頻繁出現(xiàn)的常用名稱。這里給出了最常用類/id名稱的示例列表:

header

content

nav

sidebar

footer

如果要查看完整的列表,可以看看最常見(jiàn)命名慣例表

這些常見(jiàn)的類以及id名稱是否標(biāo)志著一種標(biāo)準(zhǔn)的誕生或是普遍接受慣例的形成呢?盡管這是我所希望的,但我并不這么認(rèn)為。我的確希望能夠看見(jiàn)一整套對(duì)于我們每天都可以看到的常用頁(yè)面元素的命名標(biāo)準(zhǔn)。同時(shí),使用標(biāo)準(zhǔn)化的命名方式可以使得尋找頁(yè)面元素以及對(duì)Web站點(diǎn)升級(jí)帶來(lái)方便,尤其當(dāng)需要在由不同開(kāi)發(fā)人員在不同時(shí)間所開(kāi)發(fā)站點(diǎn)中換來(lái)?yè)Q去工作的時(shí)候。

review:

大的布局div可以以外觀的方式命名(如header,footer),其他的我覺(jué)得還是應(yīng)該以描述所含內(nèi)容的標(biāo)準(zhǔn)來(lái)命名(如menu,news)

在布局上不要出現(xiàn)left, right等有關(guān)位置的詞語(yǔ)為好……支持Shark,根據(jù)其內(nèi)容來(lái)命名是最科學(xué)的。

一開(kāi)始我覺(jué)得后半句不合適,我覺(jué)得標(biāo)記應(yīng)該和內(nèi)容和顯示完全分開(kāi) 回過(guò)頭來(lái)又想想,sharkui的話也有一定道理 比如同樣結(jié)構(gòu)的列表(分別在不同頁(yè)面) <ul> <li>今天你吃了嗎</li> <li>今天你吃了嗎</li> <li>今天你吃了嗎</li> <li>今天你吃了嗎</li> <li>今天你吃了嗎</li> </ul> 一個(gè)是新聞news,一個(gè)是技術(shù)文檔tech 我們?cè)撊绾谓o這個(gè)列表命名呢? 是分別為id=“news”和id="tech" 還是class="articleList"呢?

如果是前者,假如這兩個(gè)列表完全是一樣的,我要定義兩種完全一樣的CSS是不是很浪費(fèi)??jī)煞N還好,如果還有很多這樣的列表呢? 如果是后者,那這兩個(gè)的樣式就只能定義成一樣的了,如果我需要兩者有些區(qū)別,如顏色,那我地重新寫(xiě)一段CSS并且修改布局中的代碼

解決方案很簡(jiǎn)單啊,id和class都用上: <ul id="news" class="articleList"></ul> <ul id="tech" class="articleList"></ul> CSS有很多類似OOP中的概念,class在這里可以理解為“繼承”,id則可理解為“重載”。CSS的C不就是這個(gè)意思么?

本文來(lái)源于成都網(wǎng)站建設(shè)公司與成都網(wǎng)站設(shè)計(jì)制作公司-創(chuàng)新互聯(lián)成都公司!

新聞名稱:對(duì)CSS的Class及Id的規(guī)范化命名
標(biāo)題URL:http://m.rwnh.cn/news22/309322.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT外貿(mào)網(wǎng)站建設(shè)、品牌網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、面包屑導(dǎo)航、網(wǎng)站策劃

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

商城網(wǎng)站建設(shè)
广德县| 朔州市| 莆田市| 田林县| 思南县| 开远市| 孟津县| 霍城县| 新营市| 朝阳区| 伊通| 古蔺县| 涞水县| 且末县| 卓资县| 乐平市| 昭通市| 涞水县| 洛阳市| 宁南县| 玛多县| 惠来县| 浠水县| 墨竹工卡县| 福泉市| 通道| 泾川县| 慈利县| 禹城市| 孝昌县| 武邑县| 福建省| 共和县| 明光市| 伊宁县| 开封县| 广平县| 焦作市| 旌德县| 化德县| 田林县|