CSS規範 優化方案 (來自網易)

2021-09-06 22:37:07 字數 2699 閱讀 5614

值縮寫

縮寫值可以減少css檔案大小,並增加可讀性和可維護性。

但並非所有的值都必須縮寫,因為當乙個屬性的值縮寫時,總是會將所有項都設定一遍,而有時候我們不希望設定值裡的某些項。

/*

比如我們用下面這個樣式來讓某個定寬的容器水平居中,我們要的只是left和right,

* 而top和bottom不是這個樣式要關心的(如果設定了反倒會影響其他樣式在這個容器上的使用),

* 所以這時我們就不需要縮寫 */

.f-mgha

/*比如下面這個模組的樣式設定,我們確實需要設定padding的所有項,於是我們就可以採用縮寫

*/.m-link

常用的縮寫方法請參見**格式。

避免耗效能的屬性

以下所舉列的屬性可能造成渲染效能問題。不過有時候需求大於一切……

/*

expression

*/.class

/*filter

*/.class

選擇器合併

即css選擇器組合,可以一次定義多個選擇器,為你節省很多位元組和寶貴時間。

通常我們會將定義相同的或者有大部分屬性值相同(確實是因為相關而相同)的一系列選擇器組合到一起(採用逗號的方法)來統一定義。

/*

以下對布局類選擇器統一做了清除浮動的操作

*/.g-hd:after,.g-bd:after,.g-ft:after.g-hd,.g-bd,.g-ft

/*通常background總是會占用很多位元組,所以一般情況下,我們都會這樣統一呼叫

*/.m-logo,.m-help,.m-list li,.u-tab li,.u-tab li a.m-logo

/*以下是某個元件的寫法,因為確實很多元素是聯動的或相關的,所以採用了組合寫法,可以方便理解和修改

*/.u-tab li,.u-tab li a.u-tab li.u-tab li a

背景圖優化合併

本身的優化:

影象質量要求和影象檔案大小決定你用什麼格式的,用較小的檔案呈現較好的影象質量。

當色彩過於豐富且無透明要求時,建議採用jpg格式並儲存為較高質量。

當色彩過於豐富又有透明或半透明要求或陰影效果時,建議採用png24格式,並對ie6進行png8退化(或在不得已情況下使用濾鏡)。

當色彩不太豐富時無論有無透明要求,請採用png8格式,大多數情況下建議採用這種格式。

當有動畫時,只能使用gif格式。

你可以使用工具對進行再次壓縮,但前提是不會影響色彩和透明。

多張的合併:

單個圖示之間必須保留空隙,空隙大小由容器大小及顯示方式決定。這樣做的好處是既考慮了「容錯性」又提高了的可維護性。

圖示的排列方式,也由容器大小及顯示方式決定。排列方式分為以下幾種:橫向排列(容器寬度有限)、縱向排列(容器高度有限)、斜線排列(容器寬高不限),靠左排列(容器背景居左)、靠右排列(容器背景居右)、水平居中排列(容器背景水平居中)、垂直居中排列(容器背景垂直居中)。

合併後大小不宜超過50k,建議大小在20k-50k之間。

為保證多次修改後的質量,請保留乙份psd原始圖,修改和新增都在psd中進行,最後匯出png。

分類合併:

並不是把所有的圖示都合併在一張裡就是最好的,除了要控制大小之外還要注意以下方法。

按照排列方式,把排列方式一樣的進行合併,便於樣式控制。

按照模組或元件,把同屬於乙個模組或元件的進行合併,方便模組或元件的維護。

按照大小,把大小一致或差不多的進行合併,可充分利用空間。

按照色彩,把色彩一致或差不多的進行合併,保證合併後的色彩不過於豐富,可防止色彩失真。

綜合以上方法進行合併。

hack的避免

當避免的代價較大時,可以使用hack而不避免,比如你需要增加很多html或多寫很多css時會得不償失。

豐富的實戰經驗可以幫助你了解那些常見問題並用多種不同的思路來避免它,所以經驗和思維方法在這裡顯得很重要。

根據你自己的能力來解決hack的問題,我們不建議你用乙個自己都沒有把握的方法來避免hack,因為也許你這個方法本身存在你沒有發現的問題。

如果css可以做到,就不要使用js

讓css做更多的事,減輕js開發量。

用css控制互動或視覺的變化,js只需要更改classname。

利用css一次性更改多個節點樣式,避免多次渲染,提高渲染效率。

如果你的產品允許不相容低版本瀏覽器,那麼動畫實現可以交給css。

便於閱讀修改

如果你做到了「css規範」的所有要求,自然你也就寫出了乙個便於閱讀和修改的漂亮的css。

當然,**格式和命名規則是相對重要一些的。

清晰的css模組

如果你做到了命名規則的要求,你的css模組也就清晰可見了。

用「注釋」來說明每乙個模組對於較大的css檔案來說顯得尤為重要。

檔案壓縮

合理的書寫css能很大程度上減少檔案大小,完成後,在不損壞檔案內容的情況下,想盡一切辦法壓縮你的css,你可以借助壓縮工具把注釋和多餘的空格、換行去掉。

壓縮工具詳見:「html/css工具」部分。

其他格式優化

優化方法請參見**格式。

CSS規範 優化方案

值縮寫 縮寫值可以減少css檔案大小,並增加可讀性和可維護性。但並非所有的值都必須縮寫,因為當乙個屬性的值縮寫時,總是會將所有項都設定一遍,而有時候我們不希望設定值裡的某些項。1 2 3 4 5 6 7 比如我們用下面這個樣式來讓某個定寬的容器水平居中,我們要的只是left和right,而top和b...

來自Mozilla的CSS書寫規範建議

乙個來自mozilla的css書寫規範建議,希望對大家有幫助 引用內容 顯示屬性 display list style position float clear 自身屬性 width height margin padding border background 文字屬性 color font te...

網易嚴選後台系統前端規範化解決方案

網易嚴選經過一年多的快速發展,專案膨脹很快,業務規劃上,也到了拆分工作台的時候了。當前乙個業務人員在完成乙個新品開發的流程的時候,需要在多個業務系統之間切換。然而因為歷史原因,各後台專案有著不同的互動視覺形式,體驗比較差,統一互動視覺規範與前端互動已經迫在眉睫。設計與開發這套規範的目標,是讓使用者體...