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

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

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

3、一致的垂直結(jié)構(gòu)提供了一種視覺美學(xué)，讓人更想看下去，更具可讀性。如果owl選擇器過于通用，請?jiān)谠貎?nèi)使用通用選擇器(*)為布局的特定部分創(chuàng)建一致的垂直節(jié)奏。

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

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

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

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

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