成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

css書寫規(guī)范

young.li / 1242人閱讀

摘要：樣式屬性順序單個(gè)樣式規(guī)則下的屬性在書寫時(shí)，應(yīng)按功能進(jìn)行分組，組之間需要有一個(gè)空行。同時(shí)要以的順序書寫，提高代碼的可讀性。

在書寫css樣式的時(shí)候總是無意中就寫亂了，無論是命名或者是樣式的書寫順序，這里做一個(gè)總結(jié)，提醒自己在書寫css的時(shí)候時(shí)刻注意，大家可以參考哈。

1. 樣式屬性順序

單個(gè)樣式規(guī)則下的屬性在書寫時(shí)，應(yīng)按功能進(jìn)行分組，組之間需要有一個(gè)空行。
同時(shí)要以Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。

Positioning Model 布局方式、位置，相關(guān)屬性包括：position, top, z-index, display, float等

Box Model 盒模型，相關(guān)屬性包括：width, height, padding, margin，border,overflow

Typographic 文本排版，相關(guān)屬性包括：font, line-height, text-align

Visual 視覺外觀，相關(guān)屬性包括：color, background, list-style, transform, animation

2. CSS選擇器命名規(guī)則

分類式命名法(在前端組件化下尤為重要)

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

模塊（module）（.m-）：通常是一個(gè)語義化的可以重復(fù)使用的較大的整體！比如導(dǎo)航、登錄、注冊(cè)等

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

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

狀態(tài)（.z-）：為狀態(tài)類樣式加入前綴，統(tǒng)一標(biāo)識(shí)，方便識(shí)別，她只能組合使用或作為后代出現(xiàn)（.u-ipt.z-dis{}，.m-list li.z-sel{}）

javascript(.j-)：.j-將被專用于JS獲取節(jié)點(diǎn)，請(qǐng)勿使用.j-定義樣式

不要使用 " _ " 下劃線來命名css
能良好的區(qū)分javascript變量名
輸入的時(shí)候少按一個(gè)shift鍵
瀏覽器兼容性問題（比如使用_tips的選擇器命名，在IE6是無效的）

id采用駝峰式命名(不要亂用id)

scss中的變量、函數(shù)、混合、placeholder采用駝峰式命名

相同語義的不同類命名方法：
直接加數(shù)字或字母區(qū)分即可（如：.m-list、.m-list2、.m-list3等，都是列表模塊，但是是完全不一樣的模塊）。其他舉例：.f-fw0、.f-fw1、.s-fc0、.s-fc1、.m-logo2、.m-logo3、u-btn、u-btn2等等。

命名方式(BEM)：類-體（例：g-head）、類-體-修飾符（例：u-btn-active）

后代選擇器：體-修飾符即可（例：.m-page .cut{}）注：后代選擇器不要在頁面布局中使用，因?yàn)槲廴镜目赡苄暂^大；

3. 最佳寫法 
    /* 這是某個(gè)模塊 */
    .m-nav{}/* 模塊容器 */
    .m-nav li,.m-nav a{}/* 先共性  優(yōu)化組合 */
    .m-nav li{}/* 后個(gè)性  語義化標(biāo)簽選擇器 */
    .m-nav a{}/* 后個(gè)性中的共性 按結(jié)構(gòu)順序 */
    .m-nav a.a1{}/* 后個(gè)性中的個(gè)性 */
    .m-nav a.a2{}/* 后個(gè)性中的個(gè)性 */
    .m-nav .z-crt a{}/* 交互狀態(tài)變化 */
    .m-nav .z-crt a.a1{}
    .m-nav .z-crt a.a2{}
    .m-nav .btn{}/* 典型后代選擇器 */
    .m-nav .btn-1{}/* 典型后代選擇器擴(kuò)展 */
    .m-nav .btn-dis{}/* 典型后代選擇器擴(kuò)展（狀態(tài)） */
    .m-nav .btn.z-dis{}/* 作用同上，請(qǐng)二選一（如果可以不兼容IE6時(shí)使用） */
    .m-nav .m-sch{}/* 控制內(nèi)部其他模塊位置 */
    .m-nav .u-sel{}/* 控制內(nèi)部其他元件位置 */
    .m-nav-1{}/* 模塊擴(kuò)展 */
    .m-nav-1 li{}
    .m-nav-dis{}/* 模塊擴(kuò)展（狀態(tài)） */
    .m-nav.z-dis{}/* 作用同上，請(qǐng)二選一（如果可以不兼容IE6時(shí)使用） */
4. 統(tǒng)一語義理解和命名

布局(.g-)

語義 命名 簡(jiǎn)寫
文檔 doc doc
頭部 head hd
主體 body bd
尾部 foot ft
主欄 main mn
主欄子容器 mainc mnc
側(cè)欄 side sd
側(cè)欄子容器 sidec sdc
盒容器 wrap/box wrap/box

模塊（.m-）、元件（.u-）

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

功能（.f-）

語義 命名 簡(jiǎn)寫
清除浮動(dòng) clearboth cb
左浮動(dòng) floatleft fl
內(nèi)聯(lián) inlineblock ib
文本居中 textaligncenter tac
垂直居中 verticalalignmiddle vam
溢出隱藏 overflowhidden oh
完全消失 displaynone dn
字體大小 fontsize fz
字體粗細(xì) fontweight fs

皮膚（.s-）

語義 命名 簡(jiǎn)寫
字體顏色 fontcolor fc
背景顏色 backgroundcolor bgc
邊框顏色 bordercolor bdc

狀態(tài)(.z-)

語義 命名 簡(jiǎn)寫
選中 selected sel
當(dāng)前 current crt
顯示 show show
隱藏 hide hide
打開 open open
關(guān)閉 close vclose
出錯(cuò) error err
不可用 disabled dis

5. 注意事項(xiàng)

一律小寫，中劃線

盡量不用縮寫

不要隨便使用id

去掉小數(shù)點(diǎn)前面的0： 0.9rem => .9rem

使用簡(jiǎn)寫：margin： 0 1rem 3rem

本文大部分內(nèi)容參考自網(wǎng)易前端規(guī)范：http://nec.netease.com/standa...

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/113245.html

相關(guān)文章

  • css命名和書寫規(guī)范

    摘要：前言在項(xiàng)目開發(fā)中對(duì)于名字的命名和書寫老是感覺很混亂，這對(duì)于代碼的可讀性以及維護(hù)提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下命名規(guī)則說明所有的命名最好都小寫屬性的值一定要用雙引號(hào)括起來，且一定要有值如每個(gè)標(biāo)簽都要有開始和結(jié)束，且 前言 在項(xiàng)目開發(fā)中對(duì)于css名字的命名和書寫老是感覺很混亂，這對(duì)于代碼的可讀性以及維護(hù)提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下....

    wua_wua2012 評(píng)論0 收藏0

  • css命名和書寫規(guī)范

    摘要：前言在項(xiàng)目開發(fā)中對(duì)于名字的命名和書寫老是感覺很混亂，這對(duì)于代碼的可讀性以及維護(hù)提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下命名規(guī)則說明所有的命名最好都小寫屬性的值一定要用雙引號(hào)括起來，且一定要有值如每個(gè)標(biāo)簽都要有開始和結(jié)束，且 前言 在項(xiàng)目開發(fā)中對(duì)于css名字的命名和書寫老是感覺很混亂，這對(duì)于代碼的可讀性以及維護(hù)提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下....

    王笑朝 評(píng)論0 收藏0

  • 推薦大家使用的CSS書寫規(guī)范、順序

    摘要：書寫順序位置屬性等大小文字系列等背景等其他等書寫規(guī)范使用縮寫屬性有些屬性是可以縮寫的，比如等等，這樣精簡(jiǎn)代碼同時(shí)又能提高用戶的閱讀體驗(yàn)。CSS書寫順序 ?1.位置屬性(position, top, right, z-index, display, float等) 2.大小(width, height, padding, margin) 3.文字系列(font, line-height, le...

    王軍 評(píng)論0 收藏0

  • 團(tuán)隊(duì)合作前端書寫習(xí)慣總結(jié)

    摘要：函數(shù)的名字前綴為動(dòng)詞，以此區(qū)分變量和函數(shù)示例函數(shù)命名命名方法小駝峰式命名法命名規(guī)范前綴應(yīng)當(dāng)為動(dòng)詞命名建議可使用常見動(dòng)詞約定動(dòng)詞含義返回值判斷是否可執(zhí)行某個(gè)動(dòng)作權(quán)限函數(shù)返回一個(gè)布爾值。含有此值不含有此值判斷是否為某個(gè)值函數(shù)返回一個(gè)布爾值。CSS 規(guī)范 CSS 書寫規(guī)范 class類： 小寫字母,-分割； 圖片: 小寫字母，‘-’或者‘_’ 分...

    番茄西紅柿 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<