資訊專欄INFORMATION COLUMN
摘要：引言最近想將這幾個月做過的東西組件化，然后首先想到的是編碼規(guī)范化本文只涉及命名規(guī)范，搬來了造好的輪子。舉例對齊樣式使用對齊目標(biāo)的英文名稱。舉例注意事項一律小寫盡量用英文不加中杠和下劃線盡量不縮寫，除非一看就明白的單詞。
1.常用的css命名規(guī)范引言：最近想將這幾個月做過的東西組件化，然后首先想到的是 編碼規(guī)范化！本文只涉及 CSS 命名規(guī)范，搬來了Alloyteam 造好的輪子。可能并不完全適用，在以后開發(fā)過程中再根據(jù)需要進(jìn)行修改。╮(╯_╰)╭
頭：header
內(nèi)容：content/container
尾：footer
導(dǎo)航：nav
側(cè)邊：sidebar
欄目：column
頁面外圍控制整體布局寬度：wrapper
左右中：left right center
登錄條：loginbar
標(biāo)志：logo
廣告：banner
頁面主體：main
熱點：hot
新聞：news
下載：download
子導(dǎo)航：subnav
菜單：menu
子菜單：submenu
搜索：search
友情鏈接：friendlink
頁腳：footer
版權(quán)：copyright
滾動：scroll
內(nèi)容：content
標(biāo)簽頁：tab
文章列表：list
提示信息：msg
小技巧：tips
欄目標(biāo)題：title
加入：joinus
指南：guild
服務(wù)：service
注冊：regsiter
狀態(tài)：status
投票：vote
合作伙伴：partner
2.注釋的寫法/* Footer */ 內(nèi)容區(qū) /* End Footer */3.id的命名 3.1 頁面結(jié)構(gòu)
容器: container
頁頭：header
內(nèi)容：content/container
頁面主體：main
頁尾：footer
導(dǎo)航：nav
側(cè)欄：sidebar
欄目：column
頁面外圍控制整體布局寬度：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
注冊：regsiter
搜索：search
功能區(qū)：shop
標(biāo)題：title
加入：joinus
狀態(tài)：status
按鈕：btn
滾動：scroll
標(biāo)簽頁：tab
文章列表：list
提示信息：msg
當(dāng)前的: current
小技巧：tips
圖標(biāo): icon
注釋：note
指南：guild
服務(wù)：service
熱點：hot
新聞：news
下載：download
投票：vote
合作伙伴：partner
友情鏈接：link
版權(quán)：copyright
4.class的命名 4.1 顏色使用顏色的名稱或者十六進(jìn)制。
舉例：
.red{color:red;}
.f60{color:#f60;}
.ff8600{color:#ff8600;}
直接使用 font+字體大小 作為名稱。
舉例：
.font12px{font-size:12px;}
.font9pt{font-size:9pt;}
使用對齊目標(biāo)的英文名稱。
舉例：
.left{float:left;}
.bottom{float:bottom;}
使用 類別+功能 的方式命名。
舉例：
.barnews{}
.barproduct{}
一律小寫；
盡量用英文；
不加中杠和下劃線；
盡量不縮寫，除非一看就明白的單詞。
6.常用css文件命名主要的 master.css
模塊 module.css
基本共用 base.css
布局，版面 layout.css
主題 themes.css
專欄 columns.css
文字 font.css
表單 forms.css
補丁 mend.css
打印 print.css
后記：搬到最后，看到注意事項里面的一條：不加中杠和下劃線。Σ(っ °Д °;)っ有點接受不了。。。然后繼續(xù)搜索，發(fā)現(xiàn)一個好東西—— BEM！然后，我放下最后一塊磚頭，滾去學(xué)習(xí)了，再見(。?_?)/~~~
參考資料
關(guān)于團隊合作的css命名規(guī)范 - 騰訊AlloyTeam Blog
編寫可維護(hù)的CSS - SegmentFault
BEM + Emmet = 根本停不下來 - SegmentFault
CSS編碼規(guī)范 - SegmentFault
BEM —— 源自Yandex的CSS 命名方法論 - SegmentFault
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/110996.html
摘要：可以是數(shù)字，關(guān)鍵詞或公式十一目標(biāo)偽類選擇器器目標(biāo)偽類選擇器選擇器可用于選取當(dāng)前活動的目標(biāo)元素基礎(chǔ)選擇器一、標(biāo)簽選擇器（元素選擇器）標(biāo)簽選擇器是指用HTML標(biāo)簽名稱作為選擇器，按標(biāo)簽名稱分類語法：標(biāo)簽名{屬性1:屬性值1;屬性2:屬性值2;屬性3:屬性值3;} 二、類選擇器1、類選擇器使用.(英文)+類名進(jìn)行選擇 三、css命名規(guī)范1、長名稱或詞組可以使用中橫線來為選擇器命名2、不建議使用_下...
摘要：優(yōu)先級第一優(yōu)先級無連接符號第二優(yōu)先級空格第三優(yōu)先級復(fù)雜選擇器的連接符號空格表示選中所有符合條件的后代節(jié)點。后代表示選中符合條件的子節(jié)點。直接后繼表示選中對應(yīng)列中符合條件的單元格。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
摘要：優(yōu)先級第一優(yōu)先級無連接符號第二優(yōu)先級空格第三優(yōu)先級復(fù)雜選擇器的連接符號空格表示選中所有符合條件的后代節(jié)點。后代表示選中符合條件的子節(jié)點。直接后繼表示選中對應(yīng)列中符合條件的單元格。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
摘要：優(yōu)先級第一優(yōu)先級無連接符號第二優(yōu)先級空格第三優(yōu)先級復(fù)雜選擇器的連接符號空格表示選中所有符合條件的后代節(jié)點。后代表示選中符合條件的子節(jié)點。直接后繼表示選中對應(yīng)列中符合條件的單元格。 筆記說明 重學(xué)前端是程劭非（winter）【前手機淘寶前端負(fù)責(zé)人】在極客時間開的一個專欄，每天10分鐘，重構(gòu)你的前端知識體系，筆者主要整理學(xué)習(xí)過程的一些要點筆記以及感悟，完整的可以加入winter的專欄學(xué)習(xí)【...
閱讀 1106·2021-11-23 10:05
閱讀 1784·2021-11-12 10:36
閱讀 1853·2019-08-30 15:56
閱讀 1684·2019-08-29 12:32
閱讀 3043·2019-08-28 18:04
閱讀 3428·2019-08-26 12:17
閱讀 2502·2019-08-26 11:35
閱讀 1240·2019-08-23 15:11
