摘要:推薦的寫法不推薦的寫法注意標(biāo)點(diǎn)符號(hào)每個(gè)屬性獨(dú)占一列。推薦的寫法不推薦的寫法將過長的內(nèi)容折為若干列同一屬性的值不止一個(gè)或值過長時(shí),以逗號(hào)分割這些值,每個(gè)逗號(hào)后添加一個(gè)空格,過長的值可以另起一列。
選擇器的命名規(guī)范 1.模塊化命名
例如:
與布局相關(guān)的樣式以“g”為開頭。如“g-content”和“g-header”;
與掛鉤相關(guān)的樣式以“j”為開頭。如“j-open”和“j-request”;
與元件相關(guān)的樣式以“m”為開頭。如“m-dropMenu”和“m-slider”;
與狀態(tài)相關(guān)的樣式以“s”為開頭。如“s-current”和“s-selected”;
與工具相關(guān)的樣式以“u”為開頭。如“u-clearfix”和“u-ellipsis”。
“工具”是指與業(yè)務(wù)邏輯解耦的,能夠重用的樣式;“元件”是指自定義的可重用且可移植的基本網(wǎng)頁元素;“掛鉤”是指供JavaScript操縱的樣式。
以上的說明只是舉例,大家可以根據(jù)項(xiàng)目需求自定義開頭的字符,這樣做的目的是使CSS代碼整潔易維護(hù)。
2.選擇器皆為小寫形式推薦的寫法:
.g-first-header { line-height: 16px; }
不推薦的寫法:
.g-FirstHeader { line-height: 16px; }3.每個(gè)選擇器獨(dú)占一列
除最后一個(gè)選擇器外,其它每一列選擇器均以逗號(hào)結(jié)尾。若用到兄弟元素選擇器,則相關(guān)符號(hào)的左右兩端均留出一個(gè)半角空格。
推薦的寫法:
.g-first-header, .g-second-header-1 > .g-second-header-2 { border: 2px solid #C3C3C3; }
不推薦的寫法:
.g-first-header, .g-second-header-1>.g-second-header-2 { border: 2px solid #C3C3C3; }4.避開HTML標(biāo)記
構(gòu)建選擇器時(shí)應(yīng)盡量采用語義明確的類別名稱,避開HTML標(biāo)記,因?yàn)橐坏〩TML的結(jié)構(gòu)產(chǎn)生更動(dòng),則與此對(duì)應(yīng)的樣式也就無效了。盡量將樣式與結(jié)構(gòu)分離,這樣會(huì)使得階層式樣式表在日后更易被維護(hù)。
推薦的寫法:
.g-content .g-item { flex-basis: 20%; }
不推薦的寫法:
.g-content li { flex-basis: 20%; }5.少用ID
ID的唯一性注定了它所對(duì)應(yīng)的元素的樣式就是一次性的,無法重用,一旦HTML結(jié)構(gòu)發(fā)生變化,套用ID的選擇器就要隨之修改。另一個(gè)重要的原因是:ID的權(quán)重值是最高的,這可能會(huì)導(dǎo)致日后添加的樣式無法復(fù)寫原先的樣式。
推薦的寫法:
.g-special-content { height: 100px; width: 300px; }
不推薦的寫法:
#special-content { height: 100px; width: 300px; }屬性的書寫規(guī)范 1.按順序排列屬性
每條規(guī)則下的屬性在書寫時(shí),應(yīng)按類別進(jìn)行分組,其排列順序如下:
位置:bottom、float、display、left、position、right、top和z-index等;
大小:height、margin、padding和width等;
版式:color、font、letter-spacing、line-height和text-align等;
背景:background等;
其它:animation和transition等。
2.縮寫屬性有些屬性是可以合在一塊的,既精簡代碼,又便于閱讀。
推薦的寫法:
.test-selector-1 { padding: 3px 5px; }
不推薦的寫法:
.test-selector-1 { padding-top: 3px; padding-right: 5px; padding-bottom: 3px; padding-left: 5px; }3.去除小數(shù)開頭的0
推薦的寫法:
.test-selector-2 { font-size: .5em; }
不推薦的寫法:
.test-selector-2 { font-size: 0.5em; }4.縮寫十六進(jìn)位值
推薦的寫法:
.test-selector-3 { background-color: #0b0; }
不推薦的寫法:
.test-selector-3 { background-color: #00bb00; }5.合理使用引號(hào)
對(duì)于“font-family”屬性來說,我們通常會(huì)以引號(hào)夾住帶有空格的字體名稱,而對(duì)于不具備這些特征的一般字體來說,引號(hào)存在與否并不影響頁面的顯示效果。為了保證視覺上的統(tǒng)一,最大程度相容各種瀏覽器,建議你在所有字體名稱的兩端均加上引號(hào)。
推薦的寫法:
.test-selector-4 { font-family: "Microsoft YaHei", "微軟正黑體", "5b8b4f53"; }
不推薦的寫法:
.test-selector-4 { font-family: "Microsoft YaHei", 微軟正黑體, 5b8b4f53; }
個(gè)別屬性的值含有“url()”字串,開發(fā)者需要往其中傳入一個(gè)資源路徑。請(qǐng)注意,在低版本的Internet Explorer中,路徑中的空格有可能無法被辨識(shí),導(dǎo)致資源無法被找到。為保險(xiǎn)起見,不論路徑中是否含有空格,你傳入的路徑兩端最好都加上引號(hào)。
推薦的寫法:
.test-selector-5 { background-image: url(“../Images/BacPic.png”); }
不推薦的寫法:
.test-selector-5 { background-image: url(../Images/BackPic.png); }6.避開!important
“!important”會(huì)給日后的維護(hù)帶來麻煩,使開發(fā)者難以查找樣式問題。如果在書寫時(shí)發(fā)現(xiàn)新樣式無法復(fù)寫舊樣式。通常有兩個(gè)原因:要么新樣式寫在了舊樣式的前面,要么新樣式對(duì)應(yīng)的選擇器的權(quán)重比舊樣式的更低。針對(duì)后一種情況,只要增加新樣式選擇器的權(quán)重值就可以完全避開這個(gè)問題,無需用到“!important”。
推薦的寫法:
.test-selector-6 .test-selector-7 { font-size: 16px; } .test-selector-6 .test-selector-7 .test-selector-8 { font-size: 14px; }
不推薦的寫法:
.test-selector-6 .test-selector-7 { font-size: 16px; } .test-selector-8 { font-size: 14px !important; }7.規(guī)范注釋
在單列注釋中,星號(hào)與內(nèi)容之間留一個(gè)半角空格。
推薦的寫法:
/* 這是第一段注釋文字。 */ // 這是第二段注釋文字。
不推薦的寫法:
/*這里是一段注釋文字。*/ //這是第二段注釋文字。
在多列注釋中,多個(gè)星號(hào)要排成一條線。星號(hào)與內(nèi)容之間同樣留一個(gè)半角空格。
推薦的寫法:
/** * 這里是一段注釋文字。 * 這是第二段注釋文字。 */
不推薦的寫法:
/** *這里是一段注釋文字。 *這是第二段注釋文字。 */
在文檔注釋中,除了要按照多列注釋的寫法以外,還要用標(biāo)識(shí)符來說明文檔中的某一部分,標(biāo)識(shí)符后的冒號(hào)右側(cè)與說明文字之間留一個(gè)半角空格。
推薦的寫法:
/** * @name: 文件名; * @description: 描述文字; * @author: 張三、李四; * @update: 2018年12月19日。 */
不推薦的寫法:
/** * @name:文件名; * @description:描述文字; * @author:張三、李四; * @update:2018年12月19日。 */8.將標(biāo)準(zhǔn)屬性置于底部
有些屬性在部分瀏覽器中尚未完全標(biāo)準(zhǔn)化,每家瀏覽器開發(fā)商對(duì)這些屬性的實(shí)現(xiàn)效果或許并不統(tǒng)一,因此目前需要在開頭加入瀏覽器廠商的專有字符串。因此同一個(gè)屬性需要寫多次,但有一條需要注意:將不帶前置標(biāo)記的屬性置于最下方。
推薦的寫法:
.test-selector-9 { opacity: 0; -webkit-transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; transition: opacity 3s; }
不推薦的寫法:
.test-selector-9 { opacity: 0; -webkit-transition: opacity 3s; transition: opacity 3s; -moz-transition: opacity 3s; -ms-transition: opacity 3s; -o-transition: opacity 3s; }9.注意標(biāo)點(diǎn)符號(hào)
每個(gè)屬性獨(dú)占一列。緊接樣式屬性的冒號(hào),其后面要留一個(gè)半角空格。值以分號(hào)結(jié)尾。
推薦的寫法:
.test-selector-10 { opacity: .5; }
不推薦的寫法:
.test-selector-10 { opacity:.5 }10.樣式塊間留一空行
樣式選擇器及其樣式塊與周遭內(nèi)容要保留一空行以避免內(nèi)容過于擁擠,妨礙尋找。
推薦的寫法:
.test-selector-11 { opacity: 0.5; } .test-selector-12 { font-size: 16px; } .test-selector-13 { overflow: hidden; }
不推薦的寫法:
.test-selector-11 { opacity: 0.5; } .test-selector-12 { font-size: 16px; } .test-selector-13 { overflow: hidden; }11.將過長的內(nèi)容折為若干列
同一屬性的值不止一個(gè)或值過長時(shí),以逗號(hào)分割這些值,每個(gè)逗號(hào)后添加一個(gè)空格,過長的值可以另起一列。
推薦的寫法:
.test-selector-14 { linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%); }
不推薦的寫法:
.test-selector-14 { linear-gradient(135deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(225deg, deeppink 25%, transparent 25%) - 50px 0, linear-gradient(315deg, deeppink 25%, transparent 25%), linear-gradient(45deg, deeppink 25%, transparent 25%); }12.避開CSS Hack
所謂“CSS Hack”,就是在樣式表中加入少許特殊符號(hào),讓能夠辨識(shí)不同符號(hào)的瀏覽器在同一個(gè)元素上計(jì)算出來的樣式各不相同。出現(xiàn)CSS Hack的原因就在于老式的瀏覽器(諸如飽受詬病的Internet Explorer 6)對(duì)同一套樣式表的計(jì)算結(jié)果與其它瀏覽器的并不相同,這就很有可能會(huì)造成版式上的錯(cuò)亂。因此在過去,我們通常要針對(duì)個(gè)別怪異的瀏覽器撰寫有針對(duì)性的CSS。如width: 300px; _width: 200px;對(duì)其它瀏覽器來說,該選擇器的寬度值應(yīng)為300個(gè)像素,但I(xiàn)E 6能夠辨識(shí)出底線,因此它計(jì)算出的寬度就是200個(gè)像素。
13.減少使用影響性能的屬性樣式表中不要含有過多的濾鏡表達(dá)式和repeat關(guān)鍵字等,這些屬性會(huì)降低網(wǎng)頁的渲染性能。若要重復(fù)背景圖片,那么原圖的寬高各不小于8px。
文章版權(quán)歸作者所有,未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址:http://specialneedsforspecialkids.com/yun/114682.html
摘要:翻譯自選擇器的命名規(guī)范模塊化命名例如與布局相關(guān)的樣式以為開頭。推薦的寫法不推薦的寫法規(guī)范注釋在單列注釋中,星號(hào)與內(nèi)容之間留一個(gè)半角空格。翻譯自《CSS Naming and Writing Specification》選擇器的命名規(guī)范1.模塊化命名例如:與布局相關(guān)的樣式以g為開頭。如g-content和g-header;與掛鉤相關(guān)的樣式以j為開頭。如j-open和j-request;與元件相...
摘要:推薦的寫法不推薦的寫法注意標(biāo)點(diǎn)符號(hào)每個(gè)屬性獨(dú)占一列。推薦的寫法不推薦的寫法將過長的內(nèi)容折為若干列同一屬性的值不止一個(gè)或值過長時(shí),以逗號(hào)分割這些值,每個(gè)逗號(hào)后添加一個(gè)空格,過長的值可以另起一列。 選擇器的命名規(guī)范 1.模塊化命名 例如: 與布局相關(guān)的樣式以g為開頭。如g-content和g-header; 與掛鉤相關(guān)的樣式以j為開頭。如j-open和j-request; 與元件相關(guān)的樣...
摘要:推薦的寫法不推薦的寫法注意標(biāo)點(diǎn)符號(hào)每個(gè)屬性獨(dú)占一列。推薦的寫法不推薦的寫法將過長的內(nèi)容折為若干列同一屬性的值不止一個(gè)或值過長時(shí),以逗號(hào)分割這些值,每個(gè)逗號(hào)后添加一個(gè)空格,過長的值可以另起一列。 選擇器的命名規(guī)范 1.模塊化命名 例如: 與布局相關(guān)的樣式以g為開頭。如g-content和g-header; 與掛鉤相關(guān)的樣式以j為開頭。如j-open和j-request; 與元件相關(guān)的樣...
摘要:目的為了提高工作效率,便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù),輸出高質(zhì)量的文檔,在網(wǎng)站建設(shè)中,使結(jié)構(gòu)更加清晰,代碼簡明有序,有一個(gè)更好的前端架構(gòu)。基本準(zhǔn)則符合標(biāo)準(zhǔn),使用具有語義的標(biāo)簽,使結(jié)構(gòu)表現(xiàn)行為分離,兼容性優(yōu)良。目的:為了提高工作效率,便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù),輸出高質(zhì)量的文檔,在網(wǎng)站建設(shè)中,使結(jié)構(gòu)更加清晰,代碼簡明有序,有一個(gè)更好的前端架構(gòu)。 基本準(zhǔn)則:符合web標(biāo)準(zhǔn),使...
摘要:前端開發(fā)規(guī)范文檔規(guī)范目的使開發(fā)流程更加規(guī)范化。中的非注釋類中文字符須轉(zhuǎn)換成編碼使用,以避免編碼錯(cuò)誤時(shí)亂碼顯示。文件規(guī)范文件名用英文單詞,多個(gè)單詞用駝峰命名法。書寫規(guī)范命名規(guī)范。圖片規(guī)范命名應(yīng)用小寫英文數(shù)字組合,便于團(tuán)隊(duì)其他成員理解。 Web前端開發(fā)規(guī)范文檔 規(guī)范目的: 使開發(fā)流程更加規(guī)范化。 通用規(guī)范: TAB鍵用兩個(gè)空格代替(WINDOWS下TAB鍵占四個(gè)空格,LINUX下TAB鍵...
閱讀 2142·2021-10-12 10:11
閱讀 843·2021-10-09 09:41
閱讀 3757·2021-09-09 11:37
閱讀 1933·2021-09-08 10:41
閱讀 2633·2019-08-30 12:58
閱讀 2369·2019-08-30 10:58
閱讀 1272·2019-08-26 13:40
閱讀 4097·2019-08-26 13:36