盡量減少代碼重復(fù)

對于響應(yīng)式來說，每個(gè)媒體查詢都會增加成本，添加的媒體查詢越多，CSS代碼就會越變得經(jīng)不起折騰，這并不是說媒體查詢就是一種不良實(shí)踐，只要用對了，它就是利器，但是它只應(yīng)該作為最后的手段，媒體查詢不能以一種連續(xù)的方式來修復(fù)問題。它的工作原理基于特定的斷點(diǎn)，如果大部分代碼并不是以彈性方式來寫，那么媒體查詢能做的只是修補(bǔ)某個(gè)特定分辨率下的特定問題——這本質(zhì)就是醬灰塵掃到地毯下面而已。
下面幾種方式可以避免不必要的媒體查詢：

• 使用百分比長度來取代固定長度。

eg：vw、vh、vmin、vmax

• 當(dāng)需要在較大分辨率下得到固定寬度時(shí)，使用max-width而不是width。
  不要忘記為替換元素(比如 img object video iframe等)設(shè)置一個(gè)max-width
  ，值為100%。

• 加入背景圖片需要完整地鋪滿一個(gè)容器，不管容器的尺寸如何變化。
  background-size: cover

• 當(dāng)圖片或其他元素以行列式進(jìn)行布局時(shí)，讓視口的寬度來決定列的數(shù)量。
  Flexbox或者display: inline-block

• 在使用多列文本時(shí)，指定column-width
  (列寬)而不是指定column-count(列數(shù))。

合理使用簡寫

以下兩行代碼并不是等價(jià)的：

background: rebeccapurple;
background-color: rebeccapurple;

前者得到純色背景，
后者只是單個(gè)屬性，可能存在其他比如background-image聲明。
展開式屬性與簡寫屬性配合使用可以讓代碼更加的DRY。

我應(yīng)該使用預(yù)處理器嗎

Stylus，Sass,Less如果使用得當(dāng)，它們會在大型項(xiàng)目中可以讓代碼更加靈活
下面變量的玩法預(yù)處理器無法做到：

ul { --accent-color: purple; }
ol { --accent-color: rebeccapurple; }
li { background: var(--accent-color); }

在引入預(yù)處理器的問題上需冷靜決策，避免依賴和濫用。
?