遮天,耳根

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案

聊聊CSS代碼重構(gòu)與優(yōu)化之路

簡(jiǎn)短的概括：

1?發(fā)現(xiàn)問題：

項(xiàng)目中css代碼痛點(diǎn)：寫CSS的同學(xué)們往往會(huì)體會(huì)到，隨著項(xiàng)目規(guī)模的增加，項(xiàng)目中的CSS代碼也會(huì)越來越多，如果沒有及時(shí)對(duì)CSS代碼進(jìn)行維護(hù)，CSS代碼不斷會(huì)越來越多。你不知道修改這行代碼會(huì)有什么影響，所以如果有修改或增加新功能時(shí)，開發(fā)人員往往不敢去刪除舊的冗余的代碼，而保險(xiǎn)地增加新代碼，最終的壞處就是項(xiàng)目中的CSS會(huì)越來越多，最終陷入無底洞。

成都網(wǎng)站建設(shè)哪家好，找創(chuàng)新互聯(lián)建站！專注于網(wǎng)頁(yè)設(shè)計(jì)、網(wǎng)站建設(shè)、微信開發(fā)、小程序開發(fā)、集團(tuán)企業(yè)網(wǎng)站制作等服務(wù)項(xiàng)目。核心團(tuán)隊(duì)均擁有互聯(lián)網(wǎng)行業(yè)多年經(jīng)驗(yàn)，服務(wù)眾多知名企業(yè)客戶；涵蓋的客戶類型包括：成都門簾等眾多領(lǐng)域，積累了大量豐富的經(jīng)驗(yàn)，同時(shí)也獲得了客戶的一致稱贊！

2?解決問題：

CSS代碼重構(gòu)：我們寫CSS代碼時(shí)，不僅僅只是完成頁(yè)面設(shè)計(jì)的效果，還應(yīng)該讓CSS代碼易于管理，維護(hù)。我們對(duì)CSS代碼重構(gòu)主要有兩個(gè)目的：提高代碼性能，提高代碼的可維護(hù)性。

一、如何提高 CSS 性能

1?CSS是如何工作的?

1.1CSS阻止渲染

當(dāng)一個(gè)頁(yè)面有CSS可用時(shí)，無論是內(nèi)聯(lián)還是外部樣式表，瀏覽器都會(huì)延遲渲染，直到CSS被解析。這是因?yàn)闆]有CSS的頁(yè)面通常是不可用的。

1.2CSS可以阻止HTML的解析

盡管瀏覽器在完成CSS解析之前不會(huì)顯示內(nèi)容，但它會(huì)處理HTML的其余部分。然而腳本會(huì)阻止解析器，除非它們被標(biāo)記為defer或async。一個(gè)腳本有可能操縱頁(yè)面和其余代碼，所以瀏覽器必須注意該腳本的執(zhí)行時(shí)間。

屏蔽腳本的解析器：腳本如何屏蔽HTML解析。

因?yàn)槟_本可以影響應(yīng)用到頁(yè)面的樣式，如果瀏覽器仍在處理一些CSS，它就會(huì)等到處理完畢再運(yùn)行腳本。因?yàn)樵谀_本運(yùn)行之前不會(huì)繼續(xù)解析文檔，這意味著CSS不再只是阻止渲染--取決于文檔中外部樣式表和腳本的順序，也可能停止HTML解析。

解析器阻塞CSS：CSS如何阻塞HTML解析。

為了避免阻塞解析，請(qǐng)盡快交付CSS，并以最佳順序安排你的資源。

2?注意CSS的大小

2.1壓縮和最小化CSS

壓縮文件可以顯著提高速度，服務(wù)器和客戶端交互中使用最廣泛的壓縮格式是Gzip。

最小化是去除空白和任何不必要的代碼的過程。輸出的是一個(gè)更小但完全有效的代碼文件，瀏覽器可以解析，這將為你節(jié)省一些字節(jié)。Terser是一個(gè)流行的JavaScript壓縮工具，如果你使用webpack，v4包含一個(gè)插件來創(chuàng)建minified的構(gòu)建文件。

2.2刪除未使用的CSS

去除未使用的CSS通常是手工操作。主要的挑戰(zhàn)在于它有多么復(fù)雜。我們必須在所有可能的狀態(tài)下，在所有可能的設(shè)備上仔細(xì)審核整個(gè)網(wǎng)站(以覆蓋媒體查詢)，并執(zhí)行所有可能改變樣式的JavaScript功能。UnusedCSS和PurifyCSS是流行的工具，可以幫助查明不必要的樣式，但我們應(yīng)該配合仔細(xì)的視覺回歸測(cè)試。

在這里，使用CSS-in-JS的顯著優(yōu)勢(shì)：每個(gè)組件內(nèi)渲染的樣式都是只需要CSS。在CSS-in-JS中加快CSS的秘訣是將CSS內(nèi)聯(lián)到頁(yè)面中，或者將其提取到外部CSS文件中。將CSS發(fā)送到一個(gè)JavaScript文件中會(huì)導(dǎo)致它的解析和緩慢計(jì)算。

二、CSS的設(shè)計(jì)模式/架構(gòu)

最近通用的CSS設(shè)計(jì)思想：OOCSS、SMACSS、BEMCSS、METACSS。

1、OOCSS

1.1OOCSS定義

OOCSS(Object Oriented CSS)是面向?qū)ο骳ss，旨在編寫高可復(fù)用、低耦合和高擴(kuò)展的CSS代碼。

OOCSS是以面向?qū)ο蟮乃枷肴ザx樣式，將抽象和實(shí)現(xiàn)分離，抽離公共代碼。從而使代碼重用性，可維護(hù)性和可擴(kuò)展性更好的書寫方法。

1.2設(shè)計(jì)的主要規(guī)范

1) 減少對(duì) HTML 結(jié)構(gòu)的依賴(分離結(jié)構(gòu)和主題)

2) 增加樣式的復(fù)用性(分離容器和內(nèi)容)

在 OOCSS 的觀念中，強(qiáng)調(diào)重復(fù)使用 class，而應(yīng)該避免使用 id 作為 CSS 的選擇器。OOCSS追求元件的復(fù)用，其class命名更為抽象，一般不體現(xiàn)具體事物，而注重表現(xiàn)層的抽取。

1.3項(xiàng)目實(shí)例：

OOCSS鼓勵(lì)我們應(yīng)該思考在不同元素中哪些樣式是通用的，然后將這些通用的樣式從模塊、組件、對(duì)象等中抽離出來，使其能在任何地方能夠復(fù)用，而不依賴于某個(gè)特定的容器。

 
 
 
 
  
  
  
  .title {
  
  
  
    font-family: Arial, Helvetica, sans-serif;
  
  
  
    font-size: 2em;
  
  
  
    line-height: 1;
  
  
  
    color: #777;
  
  
  
    text-shadow: rgba(0, 0, 0, .3) 3px 3px 6px;
  
  
  
  }
  
  
  
  
  
  
  
  .header .title {
  
  
  
    font-size: 1.5em;
  
  
  
    text-shadow: rgba(0, 0, 0, .3) 2px 2px 4px;
  
  
  
  }

1.4OOCSS的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

1) css代碼減少，降低工作量。

2) 樣式重復(fù)利用，代碼簡(jiǎn)潔，便于維護(hù)。

3) 代碼少，加載速度快。

4) 能輕松構(gòu)造新的頁(yè)面布局，或制作新的頁(yè)面風(fēng)格

缺點(diǎn)：

1) 適用于大型網(wǎng)站項(xiàng)目(重復(fù)組件，樣式多)，小型項(xiàng)目?jī)?yōu)勢(shì)不明顯。

2) 需要熟練運(yùn)用，因?yàn)樘囟ㄒ?強(qiáng)調(diào)重復(fù)使用類選擇器，避免使用id選擇器)如果運(yùn)用不得當(dāng)，反而可能會(huì)造成后續(xù)維護(hù)困難，所以最好寫上注釋。

2、SMACSS

2.1smacss定義

smacss通過一個(gè)靈活的思維過程來檢查你的設(shè)計(jì)過程和方式是否符合你的架構(gòu)。

2.2設(shè)計(jì)的主要規(guī)范有三點(diǎn)：

1) Categorizing CSS Rules(為css分類)

2) Naming Rules(命名規(guī)范)

3) Minimizing the Depth of Applicability(最小化適配深度)

詳細(xì)說明：

1?Categorizing CSS Rules css分類

這一點(diǎn)是SMACSS的核心。SMACSS認(rèn)為css有5個(gè)類別，分別是：

1 Base

2 Layout

3 Module

4 State

5 Theme or Skin

2?Naming Rules 命名規(guī)范

按照前面5種的劃分:

Base Rules(Pass)

Layout Rules用l-或layout-這樣的前綴，例如：.l-header、.l-sidebar。

Module Rules用模塊本身的命名，例如圖文排列的.media、.media-image。

State Rules用is-前綴，例如：.is-active、.is-hidden。

Theme Rules如果作為單獨(dú)class，用theme-前綴，例如.theme-a-background、.theme-a-shadow。

3?Minimizing the Depth of Applicability 最小適配深度原則，

簡(jiǎn)單的例子：

 
 
 
 
  
  
  
  /* depth 1 */
  
  
  
  .sidebar ul h3 { }
  
  
  
  
  
  
  
  /* depth 2 */
  
  
  
  .sub-title { }

兩段css的區(qū)別在于html和css的耦合度(這一點(diǎn)上和OOCSS的分離容器和內(nèi)容的原則不謀而合)?？梢韵氲剑捎谏厦娴臉邮揭?guī)則使用了繼承選擇符，因此對(duì)于html的結(jié)構(gòu)實(shí)際是有一定依賴的。如果html發(fā)生重構(gòu)，就有可能不再具有這些樣式。對(duì)應(yīng)的，下面的樣式規(guī)則只有一個(gè)選擇符，因此不依賴于特定html結(jié)構(gòu)，只要為元素添加class，就可以獲得對(duì)應(yīng)樣式。

當(dāng)然，繼承選擇符是有用的，它可以減少因相同命名引發(fā)的樣式?jīng)_突(常發(fā)生于多人協(xié)作開發(fā))。但是，我們不應(yīng)過度使用，在不造成樣式?jīng)_突的允許范圍之內(nèi)，盡可能使用短的、不限定html結(jié)構(gòu)的選擇符。這就是SMACSS的最小化適配深度的意義。

3、BEMCSS

3.1BEM定義

BEM的意思就是塊(block)、元素(element)、修飾符(modifier),是由Yandex團(tuán)隊(duì)提出的一種前端命名方法論。這種巧妙的命名方法讓你的CSS類對(duì)其他開發(fā)者來說更加透明而且更有意義。BEM命名約定更加嚴(yán)格，而且包含更多的信息，它們用于一個(gè)團(tuán)隊(duì)開發(fā)一個(gè)耗時(shí)的大項(xiàng)目。

3.2為什么使用BEM

1)更語(yǔ)意化，可讀性更強(qiáng)

通過雙下劃線(__), 雙橫杠(--) 等符號(hào)代碼維護(hù)者可以輕松理解每一部分的意義，更強(qiáng)的可讀性往往意味著更低的維護(hù)成本。

2)模塊化，減少層疊帶來的樣式覆蓋的問題

Block是完全獨(dú)立的存在，其內(nèi)部的element/modifier的樣式都在這個(gè)block的命名空間下書寫的，所以不會(huì)收到其他外部樣式的影響，不存在樣式覆蓋的問題。

3)增強(qiáng)樣式的重用性

就像js組合不同的組件得到更復(fù)雜的組件一樣，我們也可以通過組合不同的block得到更復(fù)雜的樣式，例如使用.b-btn, .b-input來組合一個(gè)簡(jiǎn)單的form樣式，從而提高代碼的可復(fù)用性，從另一方面講也是降低了維護(hù)成本。

4)更容易做項(xiàng)目遷移

因?yàn)閎lock樣式是相對(duì)獨(dú)立的，如果在其他項(xiàng)目有需要，我們完全可以講某個(gè)單獨(dú)的block相關(guān)的樣式應(yīng)用到其他項(xiàng)目中。

*CSS的設(shè)計(jì)模式/架構(gòu)總結(jié)

1) oocss著重可復(fù)用，把每一個(gè)dom節(jié)點(diǎn)當(dāng)成一個(gè)對(duì)象，是css返璞歸真的思想;

2) smacss覆蓋了所有的細(xì)節(jié)點(diǎn);

3) bemcss著重css的命名和語(yǔ)義化;

三、迎接原子化 CSS 時(shí)代

隨著 Facebook 和 Twitter 最近的產(chǎn)品部署，我認(rèn)為一個(gè)新的趨勢(shì)正在緩慢增長(zhǎng)：Atomic CSS-in-JS。

1?什么是原子 CSS

你可能聽說過各種 CSS 方法，如 BEM, OOCSS…

 
 
 
 
  
  
  
  Danger button

現(xiàn)在，人們真的很喜歡 Tailwind CSS 和它的實(shí)用工具優(yōu)先(utility-first) 的概念。這與 Functional CSS 和 Tachyon 這個(gè)庫(kù)的理念非常接近。

 
 
 
 
  
  
  
  
  
  
  
  
  class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
  
  
  
  >
  
  
  
    Button

用海量的實(shí)用工具類(utility classes)組成的樣式表，讓我們可以在網(wǎng)頁(yè)里大顯身手。

原子 CSS 就像是實(shí)用工具優(yōu)先(utility-first)CSS 的一個(gè)極端版本: 所有 CSS 類都有一個(gè)唯一的 CSS 規(guī)則。原子 CSS 最初是由 Thierry Koblentz (Yahoo!)在 2013 年挑戰(zhàn) CSS 最佳實(shí)踐時(shí)使用的。

 
 
 
 
  
  
  
  /* 原子 CSS */
  
  
  
  .bw-2x {
  
  
  
    border-width: 2px;
  
  
  
  }
  
  
  
  .bss {
  
  
  
    border-style: solid;
  
  
  
  }
  
  
  
  .sans {
  
  
  
    font-style: sans-serif;
  
  
  
  }
  
  
  
  .p-1x {
  
  
  
    padding: 10px;
  
  
  
  }
  
  
  
  /* 不是原子 CSS 因?yàn)檫@個(gè)類包含了兩個(gè)規(guī)則 */
  
  
  
  .p-1x-sans {
  
  
  
    padding: 10px;
  
  
  
    font-style: sans-serif;
  
  
  
  }

使用實(shí)用工具/原子 CSS，我們可以把結(jié)構(gòu)層和表示層結(jié)合起來：當(dāng)我們需要改變按鈕顏色時(shí)，我們直接修改 HTML，而不是 CSS!

四、項(xiàng)目實(shí)踐-代碼

1?超出省略號(hào)

 
 
 
 
  
  
  
  // ****** 超出省略號(hào)
  
  
  
  @mixin ellipsis($line) {
  
  
  
    display: -webkit-box;
  
  
  
    -webkit-box-orient:vertical;
  
  
  
    overflow: hidden;
  
  
  
    -webkit-line-clamp: $line;
  
  
  
  }
  
  
  
  
  
  
  
  .tit-name {
  
  
  
    @include ellipsis(1);
  
  
  
    color: #333;
  
  
  
  }

2?繼承 @extend

 
 
 
 
  
  
  
  h1{
  
  
  
    border: 4px solid #ff9aa9;
  
  
  
  }
  
  
  
  .speaker{
  
  
  
    @extend h1;
  
  
  
    border-width: 2px;
  
  
  
  }

3?函數(shù) px2rem

 
 
 
 
  
  
  
  @function px2rem ($px) {
  
  
  
    $rem : 37.5px;
  
  
  
    @return ($px / $rem) + rem;
  
  
  
  }
  
  
  
  
  
  
  
  .hello {
  
  
  
    width: px2rem (100px);
  
  
  
    height: px2rem (100px);
  
  
  
    &.b {
  
  
  
      width: px2rem ( 50px);
  
  
  
      height: px2rem (50px);
  
  
  
    }
  
  
  
  }

4?表單輸入框顏色設(shè)置

 
 
 
 
  
  
  
  // 輸入框設(shè)置
  
  
  
  input {
  
  
  
    font-size: 14px;
  
  
  
    color: #2c3e50;
  
  
  
  }
  
  
  
  input::-webkit-input-placeholder {
  
  
  
    color: #c0c4cc;
  
  
  
  }
  
  
  
  // 多行文本輸入框設(shè)置
  
  
  
  textarea {
  
  
  
    font-size: 14px;
  
  
  
    color: #2c3e50;
  
  
  
  }
  
  
  
  textarea::-webkit-input-placeholder {
  
  
  
    color: #c0c4cc; 
  
  
  
  }

5?自定義滑動(dòng)條樣式

 
 
 
 
  
  
  
  /* 定義整個(gè)滑動(dòng)條的寬度和高度 */
  
  
  
  .content-nav::-webkit-scrollbar {
  
  
  
    width: 8px;
  
  
  
  }
  
  
  
  /* 定義滑塊的樣式 */
  
  
  
  .content-nav::-webkit-scrollbar-thumb {
  
  
  
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  
  
  
    background: #34495e;
  
  
  
  }
  
  
  
  /* 定義滑塊里面的軌道 */
  
  
  
  .content-nav::-webkit-scrollbar-track {
  
  
  
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  
  
  
    background: #99a3ae;
  
  
  
  }

6?彈出框表單設(shè)置

 
 
 
 
  
  
  
  .dialog-from {
  
  
  
    // input 輸入框
  
  
  
    .el-input{
  
  
  
      width: 200px;
  
  
  
    }
  
  
  
    // select 下拉菜單
  
  
  
    .el-select{
  
  
  
      width: 200px;
  
  
  
    }
  
  
  
    // textarea 菜單
  
  
  
    .el-textarea{
  
  
  
      width: 200px;
  
  
  
    }
  
  
  
    // radio 菜單
  
  
  
    .el-radio-group{
  
  
  
      width: 200px;
  
  
  
    }
  
  
  
  }

分享名稱：聊聊CSS代碼重構(gòu)與優(yōu)化之路
本文地址：http://fisionsoft.com.cn/article/cdjjisi.html