CSS中關於優化以及提高效能的方法總結

CSS 優化主要是四個面向：

1. 載入效能
   這個方面相關的best practice 太多了，網路上隨便找一找就是一堆資料，例如不要用import 啊，壓縮啊等等，主要是從減少檔案體積、減少阻塞載入、提高並發方面入手的，任何hint 都逃不出這幾個大方向。

2. 選擇器性能
   但 selector 的對整體性能的影響可以忽略不計了，selector 的考察比較是規範化和可維護性、健壯性方面，很少有人在實際工作當中會把選擇器性能作為重點關注對象的，但也像GitHub 這個分享裡面說的一樣——知道總比不知道好。

3. 渲染效能
   渲染效能是 CSS 優化最重要的關注對象。頁面渲染 junky 太多？看看是不是大量使用了 text-shadow？是不是開了字體抗鋸齒？ CSS 動畫怎麼實現的？合理利用 GPU 加速了嗎？什麼你用了 Flexible Box Model？有沒有測試換個 layout 策略對 render performance 的影響？這方面搜尋一下 CSS render performance 或 CSS animation performance 也會有一堆一堆的資料可供參考。

4. 可維護性、健全性
   命名合理嗎？結構層次設計是否夠健壯？對樣式進行抽象化復用了嗎？優雅的 CSS 不僅會影響後期的維護成本，也會對載入效能等方面產生影響。這方面可以多找一些 OOCSS（不是說就要用 OOCSS，而是說多了解一下）等等不同 CSS Strategy 的信息，取長補短。

NO2

【CSS程式碼重構與最佳化之路】

　寫CSS的同學們往往會體會到，隨著專案規模的增加，專案中的CSS程式碼也會越來越多，如果沒有及時對CSS程式碼進行維護，CSS程式碼不斷會越來越多。 CSS程式碼交錯複雜，像一張龐大的蜘蛛網分佈在網站的各個位置，你不知道修改這行程式碼會有什麼影響，所以如果有修改或增加新功能時，開發人員往往不敢去刪除舊的冗餘程式碼，而保險地增加新程式碼，最終壞處就是專案中的CSS會越來越多，最後陷入無底洞。

　　CSS程式碼重構的目的

　　我們寫CSS程式碼時，不只完成頁面設計的效果，還應該讓CSS程式碼易於管理，維護。我們對CSS程式碼重構主要有兩個目的：

　　1、提高程式碼效能

　　2、提高程式碼的可維護性

#　提高程式碼效能

　　提升CSS程式碼效能主要有兩個點：

　　1、提升頁面的載入效能

　　提升頁面的載入效能，簡單來說就是減少CSS檔案的大小，提高頁面的載入速度，盡可以的利用http快取

　　2、提高CSS程式碼效能

　　不同的CSS程式碼，瀏覽器對其解析的速度也是不一樣的，如何提高瀏覽器解析CSS程式碼的速度也是我們要考慮的

　提高程式碼的可維護性

　　提高CSS程式碼可維護性主要是體現在下面幾點：

　　1、可重用性

　　一般來說，一個專案的整體設計風格是一致的，頁面中肯定有幾個風格一致但有些許不同的模組，如何在盡可能重複使用CSS程式碼，盡可能少增加新程式碼，這是CSS程式碼中非常重要的一點。如果CSS程式碼的重用性高，我們可能只需要寫一些不一樣的地方，對頁面效能和可維護性、提高開發效率都有很大的幫助。

　　2、可擴展性

　　如果產品增加了某個功能，我們應該保證新增加的CSS代碼不會影響到舊的CSS代碼和頁面，並且盡可能少地增加新程式碼而重複使用舊程式碼。

　　3、可修改性

　　如果某個模組產品經理覺得要修改樣式，或者要刪除它，如果沒有規劃好相應的CSS程式碼，過了一段時間之後，開發人員可能已經不記得這段程式碼作用了幾個地方，不敢修改或刪除它，這樣下去CSS程式碼也就越來越多，影響了頁面的效能，還造成了程式碼的複雜度。

　CSS程式碼重構的基本方法

　　前面說到CSS程式碼重構的目的，現在來說一些如何達到這些目的的基本方法，這些方法都是易於理解，容易實施的一些手段，大家平時可能也不知不覺地在使用它。

　提高CSS效能的手段

　　首先說說如何提高CSS效能，根據頁面的載入效能和CSS程式碼效能，主要總結有下面幾點：

　　1、盡量將樣式寫在單獨的css檔案裡面，在head元素中引用

　　有時為了圖方便或快速搞定功能，我們可能會直接將樣式寫在頁面的style標籤或是直接內聯在元素上，這樣雖然簡單方便，但是非常不利於日後的維護。將程式碼寫成單獨的css檔案有幾點好處：

　　(1)內容與樣式分離，易於管理與維護

　　(2)減少頁面體積

　　(3)css檔案可以被快取、重複使用，維護成本降低

　　2、不使用@import

　　這條手段已經是眾所周知，這裡簡單提一下，@import影響css檔案的載入速度

　　3、避免使用複雜的選擇器，層級越少越好

　　有時候專案的模組越來越多，功能越來越複雜，我們寫的CSS選擇器會內套多層，越來越複雜。

　　建議選擇器的巢狀最好不要超過三層，例如：

.header .logo .text{}

　　可以最佳化成

.haeder .logo-text{}

　　簡潔的選擇器不僅可以減少css檔案大小，提高頁面的載入效能，瀏覽器解析時也會更有效率，也會提高開發人員的開發效率，降低了維護成本。

　　4、精簡頁面的樣式文件，去掉不用的樣式

　　很多時候，我們會把所有的樣式文件合併成一個文件，但是這樣有一個問題：很多其他頁面的CSS同時引用到目前頁面中，而目前頁面並沒有用到它們，這種情況會造成兩個問題：

　　(1)樣式檔案偏大，影響載入速度

　　(2 )瀏覽器會進行多餘的樣式匹配，影響渲染時間。

　　正確的處理方法是根據目前頁面所需的css去合併那些目前頁面用到的CSS檔案。

　　PS：合併成一個檔案有一個優點：樣式檔案會被瀏覽器緩存，進入到其他頁面樣式檔案不用再去下載。這條規則應根據場景來區別對待，如果是大項目，應該合併成不同的樣式文件，如果是簡單的項目，建議合併成一個文件即可。如果無法確認項目規模，建議分開成不同的樣式文件，日後要合併也比較方便。

　　5、利用CSS繼承減少程式碼量

　　我們知道有一部分CSS程式碼是可以繼承的，如果父元素已經設定了該樣式，子元素就不需要去設定該樣式，這也是提高效能的行之有效的方法。

　　常見的可以繼承的屬性例如：

　　color，font-size，font-family等等

　　不可繼承的例如：

　　position， display，float等

　　提高可維護性的方法

　　提高CSS程式碼的可維護性，簡單說就是要讓開發人員易於理解CSS程式碼，容易去修改它，不會破壞原有功能。下面說說一些常用手段。

　　1、命名與備註

　　命名是提高程式碼可讀性的第一步，也是及其重要的一步。很多人都有這樣的體會：命名是寫程式碼中最讓程式設計師頭痛的事情之一，尤其是對母語非英語的開發人員來說，要找一個合適貼切的名字並不容易。提升自己命名的能力，可以多看看別人的程式碼。以下是CSS中的一些命名相關的建議：

　　頭：header

#　　內容：content/container

　　尾：footer

　　導覽：#f　　尾：footer

nav]]

news##　　熱點：hot

　　##news##　　熱點新聞：hot

」新聞：

　　下載：download

　　子導航：subnav

　　菜單：menu

　　子菜單：submenu

　　搜索：search

　　友情連結：friendlink

　　頁腳：footer

　　版權：copyright

　　滾動：scroll

　　內容：1##　　滾動：scroll

##」　　內容：1##　　滾動：scroll

#　　狀態：status

#　　狀態：status

#[

　　.about-title{
　　margin: 0 auto 6rem; color: #333; text-align: center; letter-spacing: 4px; font-size: 2rem;
　　}
　　.achieve-title{
　　margin: 0 auto 6rem; color: #fff; text-align: center; letter-spacing: 4px; font-size: 2rem;
　　}

　　.column-title{
　　margin: 0 auto 6rem; text-align: center; letter-spacing: 4px; font-size: 2rem;
　　}
　　.about{
　　color: #333;
　　}
　　.achieve{
　　color:#fff;
　　}

　　提取公用的部分，然后在页面上分别引用column-title和about等，这样代码更简洁，维护起来也更方便了。这个例子非常简单，实际上项目中可能有更复杂的情况，总之就要要尽可能的DRY，尽可能的提取重复的东西。

　　3、书写顺序

　　这个书写顺序指的是各个样式的书写顺序，下面是推荐的CSS书写顺序

　　(1)位置属性(position, top, right, z-index, display, float等)

　　(2)大小(width, height, padding, margin)

　　(3)文字系列(font, line-height, letter-spacing, color- text-align等)

　　(4)背景(background, border等)

　　(5)其他(animation, transition等)

　　书写顺序不一定非得按照上面的推荐来进行，而是根据你自己的习惯，但是最好能保证前后的习惯一致的，或者团队应该有一个共同的代码规范去遵守，这样后期维护起来也会方便许多。

　　以上是我个人总结的一些简单的写好和重构CSS代码的方法，大家当然不必拘泥于此，有不同的意见和建议欢迎进行交流!

　CSS方法论

　　什么是CSS方法论呢?简单地说就是一些同行为了提高CSS可维护性、提出的一些编写CSS代码的规范和方法。他们提出了一些概念，这些概念可能听起来很高大上，但是实际你平时可能不知不觉也会用到这些所谓的CSS方法论。下面我简单地介绍下几个比较常见的CSS方法论。

　OOCSS

　　OOCSS是(Object Oriented CSS)，顾名思义就是面向对象的CSS。

　　OOCSS主要有两个原则：

　　1、结构和样式分离

　　我们平时一定遇到过这种情况，比如一个页面存在着多个不同功能的按钮，这些按钮的形状大小都差不多，但是根据不同的功能会有不同的颜色或背景来加以区分。如果不进行结构和样式分离，我们的CSS代码可能是这样的

　.btn-primary{
　　width:100px;
　　height:50px;
　　padding:5px 3px;
　　background:#ccc;
　　color:#000;
　　}
　　.btn-delete{
　　width:100px;
　　height:50px;
　　padding:5px 3px;
　　background:red;
　　color:#fff;
　　}

这两个或者可能更多的按钮拥有一些不同的样式，但是它们同时拥有相同的大小样式等，我们将其抽象的部分提取出来，结果如下：

　.btn{
　　width:100px;
　　height:50px;
　　padding:5px 3px;
　　}
　　.primary{
　　background:red;
　　color:#fff;
　　}
　　.delete{
　　background:red;
　　color:#fff;
　　}

　　这样提取公用的样式出来，然后按钮同时引用btn和primary等。这种做法除了减少重复的代码精简CSS之外，还有一个好处是复用性，如果需要增加其他额外的按钮，只需要编写不同的样式，和btn配合使用即可。

　　(2)容器和内容分离

　　我们平时写代码一定写过这样代码

　.content h3{
　　font-size:20px;
　　color:#333;
　　}

　　这样的代码就是内容依赖于容器，没有分离的代码，也就是说h3的样式依赖于.content容器，如果其他地方要用到相同的样式，但是它的容器却不是.content，那你可能就是要再写一遍.something h3。

　　所以OOCSS推荐分离容器和内容，可以修改成：

　　.title{
　　font-size:20px;
　　color:#333;
　　}

　　关于这一点，我个人建议要分情况来看，像前面这个例子，它适合样式和容器分离。但是比如下面这种情况：

　.menu li{
　　font-size:12px;
　　}

　　这种ul，li列表的样式，我觉的就按照我们原先的做法就可以，不一定非得给一个类给li来设定样式，即

　.menu-item{
　　font-size:12px;
　　}

　　这样页面的li标签需要引用menu-item类。

　　当然采用哪一种方式更好我也不却确定，我自己比较喜欢.menu li的写法，大家自行思考。

　　这就是OOCSS的两个基本原则，这里只是简单介绍OOCSS，各位如果有兴趣的话请自行Google查找相关资料。

　　SMACSS

　　SMACSS是什么呢，它的全称是Scalable and Modular Architecture forCSS。简单说就是可扩展和模块化的CSS架构。

　　SMACSS将样式分成5种类型：Base，Layout，Module，State，Theme，我们简单来说说每一种类型分别指什么。

　　1、Base

　　基础样式表，定义了基本的样式，我们平时写CSS比如reset.css就是属于基础样式表，另外我认为清除浮动，一些动画也可以归类为基础样式。

　　2、Layout

　　布局样式，用于实现网页的基本布局，搭起整个网页的基本骨架。

　　3、Module

　　网页中不同的区域有这个不同的功能，这些功能是相对独立的，我们可以称其为模块。模块是独立的，可重用的组件，它们不依赖于布局组件，可以安全的删除修改而不影响其他模块。

　　4、State

　　状态样式，通常和js一起配合使用，表示某个组件或功能不同的状态，比如菜单选中状态，按钮不可用状态等。

　　关于状态样式，我个人觉得要分情况进行讨论：

　　(1)不同组件的同一状态的样式是一样的，比如头部的导航菜单的选中状态样式和侧栏的菜单选中状态样式是一样的，我认为这部分状态样式可以归类为State

　　(2)不同组件的统一状态的样式是不一样的，即两个地方的菜单虽然都是选中状态，但是他们却又不同的选中样式，这部分样式不应该被认为是State类型，而是应该放在其组件对应的Module中。

　　5、Theme

　　皮肤样式，对于可更换皮肤的站点来说，这个是很有必要的，分离了结构和皮肤，根据不同的皮肤应用不同的样式文件。

　　BEM

　　BEM是Block，Element，Modifier的缩写。下面分别来介绍一下这三个概念：

　　(1)Block：在BEM的理论中，一个网页是由block组成的，比如头部是个block，内容是block，logo也是block，一个block可能由几个子block组成。

　　(2)Element：element是block的一部分，具有某种功能，element依赖于block，比如在logo中，img是logo的一个element，在菜单中，菜单项是菜单的一个element

　　(3)Modifier：modifier是用来修饰block或者element的，它表示block或者element在外观或行为上的改变

　　我们通过BEM命名法写样式如下：

　.block{}
　　.block-element{}
　　.block-modifier{}
　　.block-element-modifier{}

　　BEM将页面解析为block和element，然后根据不同的状态使用modifier来设置样式。

　　我对BEM的思想理解可能不到位，对BEM的看法主要是由两点：

　　(1)页面CSS模块化，每个block就是一个模块，模块间相互独立

　　(2)多级的class命名，避免选择器的嵌套结构

　关于CSS方法论

　　上面提到的这些CSS方法论，大家看了就会发现，它们其实有很多思想是相同的，比如：

　　1、选择器的嵌套的优化

　　2、CSS代码模块化

　　3、抽象CSS代码

　　…

　　这些方法论，我们学习的时候，最重要的是去理解其思想，不一定非得照搬它的实现形式，多种方法结合使用。

总结

　　谈了这么多，下面来说说我自己总结的写CSS代码的一些关键点。

　　1、写代码之前：从PSD文件出发

　　当我们拿到设计师给的PSD时，首先不要急于写CSS代码，首先对整个页面进行分析，主要关注点是下面几个：

　　(1)页面分成了几个模块，哪些模块是公用的，常见的比如头部和底部，还有一些菜单栏等等

　　(2)分析每一个模块都有什么样式，提取出公用的样式，注意公用样式是全局公用(整个页面公用)还是局部公用(模块内公用)，公用样式包括公用的状态样式，比如公用的选中状态，禁用状态等等。

　　2、开始写代码

　　根据对PSD文件的分析，我们就可以开始着手写代码，我比较推荐SMACSS将样式分成不同类型的做法：

　　(1)第一步是搭好页面的骨架，也就是base样式，layout样式。

　　(2)第二步就是依次实现不同的模块，在这里我推荐BEM的命名思想，但是可以嵌套一到两层的选择器结构

　　3、优化代码

　　我相信当我们完成基本的页面效果后，还是会存在着一些重复的或者不够简洁的代码，这时候就是要去优化这些代码，主要是在提取重复代码，尽可能地精简代码。

NO3：

css性能优化的地方很多，结合以上几位大神的回答，总结如下：
1.慎重使用高性能属性：浮动、定位；
2.尽量减少页面重排、重绘
重排按照css的书写顺序：
位置：positon、top、left、z-index、float、dispay
大小：width、height、margin、padding
文字系列： font、line-height、color、letter-spacing
背景边框：background、 border
其它：anmation、transition
重绘:border、outline、background、box-shadow,能使用background-color,就尽量不要使用background;
3.去除空规则：｛｝；
4.属性值为0时，不加单位；
5.属性值为浮动小数0.**，可以省略小数点之前的0；
6.标准化各种浏览器前缀：带浏览器前缀的在前。标准属性在后；
7.不使用@import前缀，它会影响css的加载速度；
8.充分利用css继承属性，减少代码量；
9.抽象提取公共样式，减少代码量；
10.选择器优化嵌套，尽量避免层级过深；
11.css雪碧图，同一页面相近部分的小图标，方便使用，减少页面的请求次数，但是同时图片本身会变大，使用时，优劣考虑清楚，再使用;
12.将css文件放在页面最上面

.....

以上是CSS中關於優化以及提高效能的方法總結的詳細內容。更多資訊請關注PHP中文網其他相關文章！