css書寫規范

young.li 發布于2019-08-29 15:19 / 1236人閱讀

摘要：樣式屬性順序單個樣式規則下的屬性在書寫時，應按功能進行分組，組之間需要有一個空行。同時要以的順序書寫，提高代碼的可讀性。

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

1. 樣式屬性順序

單個樣式規則下的屬性在書寫時，應按功能進行分組，組之間需要有一個空行。
同時要以Positioning Model > Box Model > Typographic > Visual 的順序書寫，提高代碼的可讀性。

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

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

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

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

2. CSS選擇器命名規則

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

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

模塊（module）（.m-）：通常是一個語義化的可以重復使用的較大的整體！比如導航、登錄、注冊等

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

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

狀態（.z-）：為狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或作為后代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}）

javascript(.j-)：.j-將被專用于JS獲取節點，請勿使用.j-定義樣式

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

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

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

相同語義的不同類命名方法：
直接加數字或字母區分即可（如：.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{}）注：后代選擇器不要在頁面布局中使用，因為污染的可能性較大；

3. 最佳寫法

    /* 這是某個模塊 */
    .m-nav{}/* 模塊容器 */
    .m-nav li,.m-nav a{}/* 先共性  優化組合 */
    .m-nav li{}/* 后個性  語義化標簽選擇器 */
    .m-nav a{}/* 后個性中的共性 按結構順序 */
    .m-nav a.a1{}/* 后個性中的個性 */
    .m-nav a.a2{}/* 后個性中的個性 */
    .m-nav .z-crt a{}/* 交互狀態變化 */
    .m-nav .z-crt a.a1{}
    .m-nav .z-crt a.a2{}
    .m-nav .btn{}/* 典型后代選擇器 */
    .m-nav .btn-1{}/* 典型后代選擇器擴展 */
    .m-nav .btn-dis{}/* 典型后代選擇器擴展（狀態） */
    .m-nav .btn.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */
    .m-nav .m-sch{}/* 控制內部其他模塊位置 */
    .m-nav .u-sel{}/* 控制內部其他元件位置 */
    .m-nav-1{}/* 模塊擴展 */
    .m-nav-1 li{}
    .m-nav-dis{}/* 模塊擴展（狀態） */
    .m-nav.z-dis{}/* 作用同上，請二選一（如果可以不兼容IE6時使用） */

4. 統一語義理解和命名

布局(.g-)

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

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

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

功能（.f-）

語義	命名	簡寫
清除浮動	clearboth	cb
左浮動	floatleft	fl
內聯	inlineblock	ib
文本居中	textaligncenter	tac
垂直居中	verticalalignmiddle	vam
溢出隱藏	overflowhidden	oh
完全消失	displaynone	dn
字體大小	fontsize	fz
字體粗細	fontweight	fs

皮膚（.s-）

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

狀態(.z-)

語義	命名	簡寫
選中	selected	sel
當前	current	crt
顯示	show	show
隱藏	hide	hide
打開	open	open
關閉	close vclose
出錯	error	err
不可用	disabled	dis

5. 注意事項

一律小寫，中劃線

盡量不用縮寫

不要隨便使用id

去掉小數點前面的0： 0.9rem => .9rem

使用簡寫：margin： 0 1rem 3rem

本文大部分內容參考自網易前端規范：http://nec.netease.com/standa...

GPU云服務器云服務器 css規范書寫書寫技巧書寫順序

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/113245.html

css命名和書寫規范

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

wua_wua2012 2019-08-30 14:05 評論0 收藏0
css命名和書寫規范

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

王笑朝 2019-08-01 18:39 評論0 收藏0
推薦大家使用的CSS書寫規范、順序

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

王軍 2019-04-23 13:39 評論0 收藏0
團隊合作前端書寫習慣總結

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

番茄西紅柿 2019-04-23 13:17 評論0 收藏0