亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

CSS學(xué)習(xí)筆記(十二) CSS命名規(guī)范

stormjun / 3110人閱讀

摘要：引言最近想將這幾個(gè)月做過(guò)的東西組件化，然后首先想到的是編碼規(guī)范化本文只涉及命名規(guī)范，搬來(lái)了造好的輪子。舉例對(duì)齊樣式使用對(duì)齊目標(biāo)的英文名稱。舉例注意事項(xiàng)一律小寫(xiě)盡量用英文不加中杠和下劃線盡量不縮寫(xiě)，除非一看就明白的單詞。

  
引言：最近想將這幾個(gè)月做過(guò)的東西組件化，然后首先想到的是 編碼規(guī)范化！本文只涉及 CSS 命名規(guī)范，搬來(lái)了Alloyteam 造好的輪子?？赡懿⒉煌耆m用，在以后開(kāi)發(fā)過(guò)程中再根據(jù)需要進(jìn)行修改。╮(╯_╰)╭
1.常用的css命名規(guī)范

頭：header

內(nèi)容：content/container

尾：footer

導(dǎo)航：nav

側(cè)邊：sidebar

欄目：column

頁(yè)面外圍控制整體布局寬度：wrapper

左右中：left right center

登錄條：loginbar

標(biāo)志：logo

廣告：banner

頁(yè)面主體：main

熱點(diǎn)：hot

新聞：news

下載：download

子導(dǎo)航：subnav

菜單：menu

子菜單：submenu

搜索：search

友情鏈接：friendlink

頁(yè)腳：footer

版權(quán)：copyright

滾動(dòng)：scroll

內(nèi)容：content

標(biāo)簽頁(yè)：tab

文章列表：list

提示信息：msg

小技巧：tips

欄目標(biāo)題：title

加入：joinus

指南：guild

服務(wù)：service

注冊(cè)：regsiter

狀態(tài)：status

投票：vote

合作伙伴：partner

2.注釋的寫(xiě)法 
/* Footer */

內(nèi)容區(qū)

/* End Footer */
3.id的命名 3.1 頁(yè)面結(jié)構(gòu)

容器: container

頁(yè)頭：header

內(nèi)容：content/container

頁(yè)面主體：main

頁(yè)尾：footer

導(dǎo)航：nav

側(cè)欄：sidebar

欄目：column

頁(yè)面外圍控制整體布局寬度：wrapper

左右中：left right center

3.2 導(dǎo)航

導(dǎo)航：nav

主導(dǎo)航：mainnav

子導(dǎo)航：subnav

頂導(dǎo)航：topnav

邊導(dǎo)航：sidebar

左導(dǎo)航：leftsidebar

右導(dǎo)航：rightsidebar

菜單：menu

子菜單：submenu

標(biāo)題: title

摘要: summary

3.3 功能

標(biāo)志：logo

廣告：banner

登陸：login

登錄條：loginbar

注冊(cè)：regsiter

搜索：search

功能區(qū)：shop

標(biāo)題：title

加入：joinus

狀態(tài)：status

按鈕：btn

滾動(dòng)：scroll

標(biāo)簽頁(yè)：tab

文章列表：list

提示信息：msg

當(dāng)前的: current

小技巧：tips

圖標(biāo): icon

注釋：note

指南：guild

服務(wù)：service

熱點(diǎn)：hot

新聞：news

下載：download

投票：vote

合作伙伴：partner

友情鏈接：link

版權(quán)：copyright

4.class的命名 4.1 顏色

使用顏色的名稱或者十六進(jìn)制。

舉例：

.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}

4.2 字體大小

直接使用 font+字體大小 作為名稱。

舉例：

.font12px{font-size:12px;}
.font9pt{font-size:9pt;}

4.3 對(duì)齊樣式

使用對(duì)齊目標(biāo)的英文名稱。

舉例：

.left{float:left;}
.bottom{float:bottom;}

4.4 標(biāo)題欄樣式

使用 類別+功能 的方式命名。

舉例：

.barnews{}
.barproduct{}

5.注意事項(xiàng)

一律小寫(xiě)；

盡量用英文；

不加中杠和下劃線；

盡量不縮寫(xiě)，除非一看就明白的單詞。

6.常用css文件命名

主要的 master.css

模塊 module.css

基本共用 base.css

布局，版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補(bǔ)丁 mend.css

打印 print.css

  
后記：搬到最后，看到注意事項(xiàng)里面的一條：不加中杠和下劃線。Σ(っ °Д °;)っ有點(diǎn)接受不了。。。然后繼續(xù)搜索，發(fā)現(xiàn)一個(gè)好東西—— BEM！然后，我放下最后一塊磚頭，滾去學(xué)習(xí)了，再見(jiàn)(。?_?)/~~~

參考資料

關(guān)于團(tuán)隊(duì)合作的css命名規(guī)范 - 騰訊AlloyTeam Blog

編寫(xiě)可維護(hù)的CSS - SegmentFault

BEM + Emmet = 根本停不下來(lái) - SegmentFault

CSS編碼規(guī)范 - SegmentFault

BEM —— 源自Yandex的CSS 命名方法論 - SegmentFault

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

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

相關(guān)文章

  • 第十二課 CSS基本選擇器 css學(xué)習(xí)2

    摘要：可以是數(shù)字，關(guān)鍵詞或公式十一目標(biāo)偽類選擇器器目標(biāo)偽類選擇器選擇器可用于選取當(dāng)前活動(dòng)的目標(biāo)元素基礎(chǔ)選擇器一、標(biāo)簽選擇器（元素選擇器）標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類語(yǔ)法：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;} 二、類選擇器1、類選擇器使用.(英文)+類名進(jìn)行選擇 三、css命名規(guī)范1、長(zhǎng)名稱或詞組可以使用中橫線來(lái)為選擇器命名2、不建議使用_下...

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

  • 重學(xué)前端學(xué)習(xí)筆記（二十二）--選擇器的機(jī)制

    摘要：優(yōu)先級(jí)第一優(yōu)先級(jí)無(wú)連接符號(hào)第二優(yōu)先級(jí)空格第三優(yōu)先級(jí)復(fù)雜選擇器的連接符號(hào)空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對(duì)應(yīng)列中符合條件的單元格。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...

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

  • 重學(xué)前端學(xué)習(xí)筆記（二十二）--選擇器的機(jī)制

    摘要：優(yōu)先級(jí)第一優(yōu)先級(jí)無(wú)連接符號(hào)第二優(yōu)先級(jí)空格第三優(yōu)先級(jí)復(fù)雜選擇器的連接符號(hào)空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對(duì)應(yīng)列中符合條件的單元格。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...

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

  • 重學(xué)前端學(xué)習(xí)筆記（二十二）--選擇器的機(jī)制

    摘要：優(yōu)先級(jí)第一優(yōu)先級(jí)無(wú)連接符號(hào)第二優(yōu)先級(jí)空格第三優(yōu)先級(jí)復(fù)雜選擇器的連接符號(hào)空格表示選中所有符合條件的后代節(jié)點(diǎn)。后代表示選中符合條件的子節(jié)點(diǎn)。直接后繼表示選中對(duì)應(yīng)列中符合條件的單元格。 筆記說(shuō)明 重學(xué)前端是程劭非（winter）【前手機(jī)淘寶前端負(fù)責(zé)人】在極客時(shí)間開(kāi)的一個(gè)專欄，每天10分鐘，重構(gòu)你的前端知識(shí)體系，筆者主要整理學(xué)習(xí)過(guò)程的一些要點(diǎn)筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...

    張漢慶 評(píng)論0 收藏0

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

0條評(píng)論

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