要想構建美觀的網(wǎng)頁，學習CSS是其中一種方式，但在學習過程中，我們大部分會限制自己，一次次地運用相同的屬性， 畢竟，人是一種習慣性的動物。隨著科技進步，現(xiàn)在的生活節(jié)奏越來越緊湊，各行各業(yè)都關注著提高效率，前端開發(fā)也不例外。很多人會通過選擇器的使用和簡化代碼來快速加載渲染，但Less、SCSS這樣的預處理器在工作時就會“繞路”，而使用CSS速度更快。這里有些小技巧教你減少重復規(guī)則，標準化樣式流程等等，幫助你解決日常問題，讓你的工作變得高效流暢!

1、精靈技術，它主要針對背景圖片，插入的img不需要這個技術，但要測量每個小背景圖片的大小和位置。給盒子指定小的背景圖片時，背景定位幾乎都是負值。它可以有效地減少服務器接受和發(fā)送請求的次數(shù)，提高頁面的加載速度

2、運用字體圖標，首先把包包里面的font文件夾復制出來一份，放在我們項目根目錄。然后在html文件標簽里面添加結構，接著在html文件樣式style里面聲明字體：告訴代碼和別人使用我們自己自定義的字體，一定要注意路徑哦!最后給盒子設置字體就行。

3、一致的垂直結構提供了一種視覺美學，讓人更想看下去，更具可讀性。如果owl選擇器過于通用，請在元素內使用通用選擇器(*)為布局的特定部分創(chuàng)建一致的垂直節(jié)奏。

4、如果你希望對換行到多行的長文本行應用統(tǒng)一的間距、邊距、突出顯示或背景色，但不希望整個段落或標題看起來像一個方塊。Box Decoration Break屬性讓你可以只對文本運用樣式，同時保持填充和頁邊距的完整性。當你要在懸停時應用突出顯示，或在滑塊中設置子文本樣式讓它有突出顯示的外觀，這功能特別有用。

5、樣式“默認”鏈接，你幾乎可以在每個樣式表中找到一個通用的A樣式。但這會逼迫你為子元素中的任何鏈接編寫額外的覆蓋和樣式規(guī)則，而且在使用像WordPress這樣的CMS時，或許會致使你的主鏈接樣式容易出現(xiàn)問題。嘗試這種較少干擾的方式為“默認”鏈接添加樣式。

6、隱藏未靜音的自動播放視頻，這對于自定義用戶樣式表來說是一個很好的技巧。比如在你處理無法從源代碼輕松控制的內容時，它就會幫你免除在加載頁面時自動播放視頻中的聲音干擾訪問者。

7、最強大的CSS級別來自CSS變量，它允讓你可以聲明一組公共屬性值，這些值可以通過樣式表中任何位置的關鍵字重用。你能有一套顏色在整個項目中使用，來維持一致性。在CSS中反復重復這些顏色值是件煩人的事情，而且還容易出錯。假如某個顏色在某個時刻需要改變，就得去找尋和替換，這是相當慢的，當為最終用戶構建產品時，變量使得定制變得容易。

8、shape-outside的CSS 屬性定義了一個可以是非矩形的形狀，相鄰的內容應圍繞該形狀包裝。 一般情況下，內聯(lián)內容包圍其邊距框。 shape-outside提供了一種自定義此包裝的方法，就像是文本包裝在復雜對象周圍而不是簡單的框中。簡單來說就是文字是根據(jù)圖片的邊邊排版的，什么形狀都行。它采用與clip-path相同的值。clip-path定義用戶如何查看元素，shape-outside定義其他HTML元素如何查看元素。