css書寫規範

時間 2019-11-07

標籤 css 書寫規範欄目 CSS 简体版

原文原文鏈接

在書寫css樣式的時候老是無心中就寫亂了，不管是命名或者是樣式的書寫順序，這裏作一個總結，提醒本身在書寫css的時候時刻注意，你們能夠參考哈。javascript

1. 樣式屬性順序

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

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選擇器命名規則

分類式命名法(在前端組件化下尤其重要)html
1. 佈局（grid）（.g-）：將頁面分割爲幾個大塊，一般有頭部、主體、主欄、側欄、尾部等！
2. 模塊（module）（.m-）：一般是一個語義化的能夠重複使用的較大的總體！好比導航、登陸、註冊等
3. 元件（unit）（.u-）：一般是一個不可再分的較爲小巧的個體，一般被重複用於各類模塊中！好比按鈕、輸入框、loading等！
4. 功能（function）（.f-）：爲方便一些經常使用樣式的使用，咱們將這些使用率較高的樣式剝離出來，按需使用，一般這些選擇器具備固定樣式表現，好比清除浮動等！不可濫用！
5. 狀態（.z-）：爲狀態類樣式加入前綴，統一標識，方便識別，她只能組合使用或做爲後代出現（.u-ipt.z-dis{}，.m-list li.z-sel{}）
6. javascript(.j-)：.j-將被專用於JS獲取節點，請勿使用.j-定義樣式
不要使用 " _ " 下劃線來命名css
能良好的區分javascript變量名
輸入的時候少按一個shift鍵
瀏覽器兼容性問題（好比使用_tips的選擇器命名，在IE6是無效的）
id採用駝峯式命名(不要亂用id)
scss中的變量、函數、混合、placeholder採用駝峯式命名
相同語義的不一樣類命名方法：
直接加數字或字母區分便可（如：.m-list、.m-list二、.m-list3等，都是列表模塊，可是是徹底不同的模塊）。其餘舉例：.f-fw0、.f-fw一、.s-fc0、.s-fc一、.m-logo二、.m-logo三、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-）java

語義	命名	簡寫
導航	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