国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css 命名 分類排序方法

saucxs / 506人閱讀

摘要：功能類和皮膚類樣式為表現(xiàn)化的樣式，請不要濫用以上順序可以按需求適當(dāng)調(diào)整。

CSS內(nèi)部的分類及其順序
1、重置（reset）和默認(rèn)（base）（tags）：消除默認(rèn)樣式和瀏覽器差異，并設(shè)置部分標(biāo)簽的初始樣式，以減少后面的重復(fù)勞動！你可以根據(jù)你的網(wǎng)站需求設(shè)置！
統(tǒng)一處理：建議在這個位置統(tǒng)一調(diào)用背景圖（這里指多個布局或模塊或元件共用的圖）和清除浮動（這里指通用性較高的布局、模塊、元件內(nèi)的清除）等統(tǒng)一設(shè)置處理的樣式！

2、布局（grid）（.g-）：將頁面分割為幾個大塊，通常有頭部、主體、主欄、側(cè)欄、尾部等！

3、模塊（module）（.m-）：通常是一個語義化的可以重復(fù)使用的較大的整體！比如導(dǎo)航、登錄、注冊、各種列表、評論、搜索等！

4、元件（unit）（.u-）：通常是一個不可再分的較為小巧的個體，通常被重復(fù)用于各種模塊中！比如按鈕、輸入框、loading、圖標(biāo)等！

5、功能（function）（.f-）：為方便一些常用樣式的使用，我們將這些使用率較高的樣式剝離出來，按需使用，通常這些選擇器具有固定樣式表現(xiàn)，比如清除浮動等！不可濫用！

6、皮膚（skin）（.s-）：如果你需要把皮膚型的樣式抽離出來，通常為文字色、背景色（圖）、邊框色等，非換膚型網(wǎng)站通常只提取文字色！非換膚型網(wǎng)站不可濫用此類！

7、狀態(tài)（.z-）：為狀態(tài)類樣式加入前綴，統(tǒng)一標(biāo)識，方便識別，她只能組合使用或作為后代

8、出現(xiàn)（.u-ipt.z-dis{}，.m-list li.z-sel{}），具體詳見命名規(guī)則的擴(kuò)展相關(guān)項。
功能類和皮膚類樣式為表現(xiàn)化的樣式，請不要濫用！以上順序可以按需求適當(dāng)調(diào)整。

統(tǒng)一語義理解和命名
布局（.g-）
語義 命名 簡寫
文檔 doc doc
頭部 head hd
主體 body bd
尾部 foot ft
主欄 main mn
主欄子容器 mainc mnc
側(cè)欄 side sd
側(cè)欄子容器 sidec sdc

盒容器 wrap/box wrap/box

模塊（.m-）、元件（.u-）
語義 命名 簡寫
導(dǎo)航 nav nav
子導(dǎo)航 subnav snav
面包屑 crumb crm
菜單 menu menu
選項卡 tab tab
標(biāo)題區(qū) head/title hd/tt
內(nèi)容區(qū) body/content bd/ct
列表 list lst
表格 table tb
表單 form fm
熱點 hot hot
排行 top top
登錄 login log
標(biāo)志 logo logo
廣告 advertise ad
搜索 search sch
幻燈 slide sld
提示 tips tips
幫助 help help
新聞 news news
下載 download dld
注冊 regist reg
投票 vote vote
版權(quán) copyright cprt
結(jié)果 result rst
標(biāo)題 title tt
按鈕 button btn
輸入 input ipt

功能（.f-）
語義 命名 簡寫
浮動清除 clearboth cb
向左浮動 floatleft fl
向右浮動 floatright fr
內(nèi)聯(lián)塊級 inlineblock ib
文本居中 textaligncenter tac
文本居右 textalignright tar
文本居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢出隱藏 overflowhidden oh
完全消失 displaynone dn
字體大小 fontsize fs
字體粗細(xì) fontweight fw

皮膚（.s-）
語義 命名 簡寫
字體顏色 fontcolor fc
背景 background bg
背景顏色 backgroundcolor bgc
背景圖片 backgroundimage bgi
背景定位 backgroundposition bgp
邊框顏色 bordercolor bdc

狀態(tài)（.z-）
語義 命名 簡寫
選中 selected sel
當(dāng)前 current crt
顯示 show show
隱藏 hide hide
打開 open open
關(guān)閉 close close
出錯 error err
不可用 disabled dis

原文地址 http://nec.netease.com/standa...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/111968.html

相關(guān)文章

  • 思考 CSS 架構(gòu)

    摘要：思考一個好的架構(gòu)一個好的架構(gòu)是具有良好的可擴(kuò)展性。定義手風(fēng)琴的展開或收起，鏈接的有效或無效，元素的隱藏或顯示。的命名規(guī)范命名組件的方式是非常流行特別有幫助的規(guī)范。目前該領(lǐng)域最豐富的思想領(lǐng)袖之一。 你有沒有在一個逐漸膨脹的 CSS 項目中感到混亂呢？保持樣式風(fēng)格統(tǒng)一和 HTML 的影響是比較困難的：盡管修改一個較小的問題，都可能創(chuàng)建更多丑陋的 hack，也可能 CSS 的小改變會影響 J...

    yvonne 評論0 收藏0

  • Vue官方推薦的風(fēng)格指南

    摘要：官方推薦的風(fēng)格指南個人筆記最近剛注意到官方多了一個風(fēng)格指南的推薦。中始終用組件命名因為官方推薦風(fēng)格命名，所以能用就用組件命名單詞應(yīng)該是完整的單詞完整單詞帶易讀性的好處，和書寫麻煩的缺點。 Vue官方推薦的風(fēng)格指南-個人筆記 最近剛注意到vue官方多了一個vue風(fēng)格指南的推薦。 因為業(yè)務(wù)中一直用的vue，所以梳理學(xué)習(xí)一下，來增加自己代碼的規(guī)范性，效果不錯也可以安利到團(tuán)隊。 文檔沒有對JS...

    null1145 評論0 收藏0

  • 優(yōu)雅地寫css

    摘要：在規(guī)則聲明的左大括號前加上一個空格。規(guī)則聲明之間用空行分隔開。根據(jù)屬性的重要性順序書寫。因此私有在前，標(biāo)準(zhǔn)在后的寫法是考慮到了以后可能會出現(xiàn)的問題。且最好盡量減少沒有實際作用的冗余的屬性。 https://csswizardry.com/2013/...https://css-tricks.com/bem-101/https://www.smashingmagazine....htt...

    Kyxy 評論0 收藏0

  • 前端開發(fā)變量命名系列 - JavaScript篇

    摘要：在寫法上最常見的兩種命名分別為和。下面列出了一些約定成俗的適用例子提交表單處理分頁頁數(shù)改變處理分頁每頁大小改變按下鍵場景二異步處理這里主要是指在寫數(shù)據(jù)層服務(wù)狀態(tài)管理中的命名，以及回調(diào)的命名規(guī)則。 JavaScript作為前端開發(fā)從業(yè)人員必須掌握的3大基礎(chǔ)知識中最重要的一環(huán)，也是平是接觸時間最長、寫得最多的。在開發(fā)過程中必然會遇到命名的問題，你會詞窮、糾結(jié)、惆悵嗎？本文的出現(xiàn)相信能夠解決...

    CoXie 評論0 收藏0

  • css名方法-命名的模塊化

    摘要：基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。將命名對象劃分為組件和功能。過提高復(fù)用性，減少命名的需要，因為有的樣式直接用公共類名就能實現(xiàn)，不需要額外命名。 基本思路是確保全局空間下一級域名不沖突，那么子域名就被限定在了獨立的局部作用域中，從而保證命名的唯一性。 BEM Block-Element-Modifier SUIT C...

    vincent_xyb 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<