大廠技術(shù)  高級前端  Node進階

點擊上方 程序員成長指北，關(guān)注公眾號

回復(fù)1，加入高級Node交流群

我在超過75000條的調(diào)查回復(fù)中發(fā)現(xiàn)，CSS的難度位居榜首，因為它是 Web 開發(fā)人員必須掌握和使用的技術(shù)，同時，也是他們覺得最痛苦的技術(shù)。并且他們還說CSS太混亂了，太難了。

甚至有人說CSS在設(shè)計上很糟糕，無法保護應(yīng)用程序商店，但我認為 CSS 很棒，它絕對臃腫且難以全面學(xué)習(xí)，但這只是因為它在過去 25 年中不斷發(fā)展的原因。

在 Netscape 是頂級瀏覽器的時候，CSS就出現(xiàn)。響應(yīng)式布局的想法已經(jīng)過去十多年了，因為越來越多的瀏覽器進入市場，他們都以不同的方式實現(xiàn)了 CSS，導(dǎo)致代碼可以在一個瀏覽器中運行，但在另一個瀏覽器中，可能需要你編寫一堆瀏覽器的前綴，以使其在所有瀏覽器上都能正常工作。

所以，我完全理解為什么你會討厭 CSS，但今天，我于分享的是一個小課程，你將學(xué)習(xí)如何使用現(xiàn)代功能編寫干凈的 CSS，同時避免在 2021 年以及未來不應(yīng)該編寫糟糕的代碼。

你需要知道的第一件事是如何學(xué)習(xí) CSS，下面我們正式開始吧。

1、學(xué)習(xí)盒子模型

不學(xué)習(xí) CSS 的方法是使用像 Bootstrap 或 Tailwind 這樣的框架，它們是可以幫助你快速獲得漂亮 UI 的性感工具。但是如果你在項目中使用像 Tailwind 這樣的東西，就像結(jié)婚一樣。一方面，你不會去學(xué)習(xí) CSS 基礎(chǔ)知識，你會認為學(xué)習(xí)這個很順利；另一方面，如果你改變主意，你將不得不經(jīng)歷一個非常痛苦的時期。

當(dāng)學(xué)習(xí)基本的 CSS 時，你將更好地控制你代碼的創(chuàng)造力和自由度，直到我進入 Web 開發(fā)職業(yè)生涯后，我才得到的最好建議是學(xué)習(xí) CSS 盒模型，因為當(dāng)你理解它時，語言開始變得更有意義，事實上它很簡單，我現(xiàn)在就教你盒子模型，把每個 HTML 元素想象成盒子里面的盒子 ，你有可以有寬度和高度的內(nèi)容 ，你可以在周圍添加填充那個盒子來擠壓內(nèi)容，然后，你可以在外面添加一個邊框，然后，在邊框周圍添加額外的不可見空間，稱為邊距。

CSS 中與布局和位置相關(guān)的所有內(nèi)容都受框模型的影響，如果你打開 chrome 開發(fā)工具，你可以看到如何在頁面上的任何元素計算框模型。

2、 Firefox 很棒

這給我?guī)砹说诙€提示，在調(diào)試 CSS 時不要使用 chrome，而Firefox，他們的開發(fā)工具通常更勝一籌，尤其是在 CSS 方面，如果我檢查元素，我會像在 Chrome 中那樣對框模型進行細分我還可以直接編輯它的屬性，F(xiàn)irefox 會為我提供影響框模型的所有屬性的細目分類。

它還在 HTML 中提供了有用的注釋，例如當(dāng)一個元素導(dǎo)致另一個元素溢出時，F(xiàn)irefox 還為 flex 和網(wǎng)格布局提供了非常漂亮的圖形，談到哪個布局或元素相對于彼此的位置歷來是最重要的布局之一。在具有挑戰(zhàn)性的 CSS 方面，例如如何在水平和垂直方向上居中 div 的古老問題。

3、 Flexbox 很棒

一種選擇是給子元素絕對定位，然后使用 top 和 left 屬性移動到右下角，然后將其轉(zhuǎn)換回50%，以將其放在可以工作的中心，但現(xiàn)代CSS有一種更好的方法是 使用flexbox，允許你在 UI 中的任何位置創(chuàng)建靈活的列或行，當(dāng)元素具有顯示 flex 時，它還具有 x 和 y 軸，你可以在其上對齊其子項。

子元素以一種稱為主軸的方式流動，可以使用 justify-content 屬性在中心對齊，垂直于交叉軸，我們也可以使用 align-items 屬性將元素移動到中心。

當(dāng)涉及到布局時，F(xiàn)lexbox 通常是我使用的第一個工具，但它確實有一個主要缺點，如果你有一個包含許多相交行和列的大型復(fù)雜 UI，你最終可能會在 HTML 中使用大量容器或包裝元素。

這些元素沒有語義意義，只是在那里，所以你的 CSS 代碼可以附加一些東西，幸運的是，有一個稱為網(wǎng)格的現(xiàn)代 CSS 功能可以消除你的大部分代碼。

4、Grid 很棒

Grid與只處理單獨的列和行的 flexbox 不同，如果你是一個工作較長的 web 開發(fā)者的話，你可能會覺得Grid有點眼熟，因為它與表格布局非常相似。

Grid 允許你考慮大圖布局，當(dāng)你將元素設(shè)置為顯示網(wǎng)格時，它對開發(fā)人員更加友好，你可以將其子項定義為一堆列和行。

列的寬度可以用網(wǎng)格模板列屬性定義，我們在這里有三個值：

由空格分隔，這意味著我們有三列注意 fr 值或小數(shù)單位將負責(zé)與網(wǎng)格中的其他列共享可用空間，我們還可以定義一些行，現(xiàn)在網(wǎng)格內(nèi)的每個元素都將自動定位，但重要的是請注意，與 flexbox 布局或上帝禁止的表格布局相比，我們已經(jīng)消除了大量的 HTML 和 CSS。

5、 Clamp it down

現(xiàn)在，當(dāng)我們談?wù)擁憫?yīng)式布局時，有 90% 的時間我們談?wù)摰氖歉鶕?jù)設(shè)備或視口上的可用空間來更改某些內(nèi)容的寬度。有很多方法可以做到。

例如，你可能有一篇文章的首選寬度為 50%，但在小屏幕上，你希望將其固定為 200 像素或在大屏幕上固定為 800 像素，你可以通過編寫將有條件地應(yīng)用 CSS 的媒體查詢來實現(xiàn)基于視口大小，唯一的問題是媒體查詢會讓你想要隨著項目的增長而離開自己。

好消息是你可以使用 min、max 和clamp 等函數(shù)來扭轉(zhuǎn)局面。

我們可以重構(gòu)這段代碼，將寬度設(shè)置為一個最小為 200 像素，最大為 600 像素的區(qū)間值，然后首選值 50% 將 13 行代碼變成一行代碼，以減少 92 行代碼。

說到代碼縮減，這是 CSS 中的一個小技巧，我們經(jīng)常以這些非常長且難以閱讀的類名結(jié)束。

但是，你可以使用 emoji 字符作為類名而不是靈活的容器。

6、縱橫比單線

現(xiàn)在，如果你曾經(jīng)不得不編寫保持特定縱橫比的響應(yīng)式圖像或視頻，那么下一個技巧真的會讓你大吃一驚，我最近不得不在 fireship.io 上這樣做，以嵌入具有 16×9 縱橫比的視頻，這需要hack，你在頂部放置 56.25 填充然后給子元素絕對定位。

今天，雖然不是所有地方都支持它，但我們可以使用寬高比屬性而不是填充廢話，我們可以在視頻上定義寬高比，我們就完成了。

消除 CSS 代碼是讓它更有趣的一個重要部分，但同樣重要的是讓你的代碼更靈活。所以重構(gòu)不是一個徹底的噩夢，一個很好的方法是使用 CSS 自定義屬性或變量來實現(xiàn)。

7、 變量的變量

注意我們?nèi)绾卧诙鄠€地方使用相同的顏色值，如果我們決定更改顏色，我們需要修改引用它的每一行代碼，更好的方法是在根選擇器上定義一個全局變量。

然后，可以在任何需要的地方引用，現(xiàn)在當(dāng)你決定更改它時，你只需修改一行代碼變量級聯(lián)，就像 CSS 中的其他所有內(nèi)容一樣，這意味著你可以通過在樹的更深處重新定義它們來覆蓋它們：

你還可以將它們組合成更復(fù)雜的值，例如我們可以根據(jù)其他三個變量的值定義我們的 RGB 顏色，這種靈活性將通過允許你快速更換網(wǎng)站的不同主題來真正改變。

8、花式計算

現(xiàn)在，CSS 并不是傳統(tǒng)意義上的真正編程語言，但它確實具有使用 calc 函數(shù)運行基本計算的能力，它允許你使用一些基本數(shù)學(xué)計算一個值。但真正酷的是你可以結(jié)合使用不同的單位，比如你可能想從我們的代碼中的當(dāng)前視口寬度中減去 50 像素，我們有一個動畫，其中元素從頂部下降。

但我們想錯開它們，讓它們一個接一個地出現(xiàn)。

實現(xiàn)這一目標的一種方法是為每個元素應(yīng)用不同的動畫延遲，但這是非常重復(fù)且難以重構(gòu)的。

一種更復(fù)雜的方法是為每個定義其順序的項目定義一個內(nèi)聯(lián) CSS 變量，然后我們可以將動畫延遲定義為順序變量 100 次毫秒的計算。

而且，現(xiàn)在我們可以處理無限數(shù)量的元素，而不會增加我們的 CSS 占用空間，這要歸功于 calc 和變量的組合能力。

9、計數(shù)器狀態(tài)

我剛剛說過 CSS 不是一種編程語言，但你是否知道它實際上內(nèi)置了一個狀態(tài)管理機制，你可以在不編寫任何 JavaScript 代碼的情況下跟蹤 CSS 代碼中的運行計數(shù)。

如果你想在你的 HTML 中給標題編號，最簡單的方法是在 HTML 中手動添加這些數(shù)字。

因此，如果你想拼接一個新標題，則必須手動重新編號所有內(nèi)容，一個更智能的方法可能是 CSS 計數(shù)器，你可以使用 counter reset 屬性在代碼中創(chuàng)建一個計數(shù)器。給出你想要的任何名稱，然后在應(yīng)用所需的選擇器時增加它，它將從 0 開始，然后向 dom 中的每個 h1 元素添加 1。

現(xiàn)在你永遠不必擔(dān)心在你的 HTML 中給東西編號，在構(gòu)建一個復(fù)雜的下拉菜單時，你可能會假設(shè)一些 JavaScript 涉及到管理菜單的打開和關(guān)閉狀態(tài)，但是你可能會驚訝于僅使用簡單的 CSS 就能做到多遠。

現(xiàn)在，你很可能熟悉，當(dāng)你進入表單輸入或單擊按鈕時應(yīng)用于元素的焦點偽類。

問題在于構(gòu)建下拉菜單時，你可能會使用焦點打開菜單，但是當(dāng)你單擊該菜單內(nèi)的某些內(nèi)容時，它會失去焦點并關(guān)閉。

那是當(dāng)你使用 JavaScript 來管理狀態(tài)時，還有另一個稱為 focus-within 的偽類。如果任何孩子也有焦點，它就會保持活動狀態(tài)，并且一個簡單的功能可以消除許多用于切換狀態(tài)的 JavaScript。

這些方法可以讓你的 CSS 代碼更簡潔。

但請記住我在文章前面提到的那些瀏覽器供應(yīng)商前綴的事情。

這些東西不會消失，幸運的是，我們確實有一些方法，可以使它幾乎不引人注目。你應(yīng)該知道的一個工具是 post CSS，它本身使用稱為自動前綴的工具來自動添加所有供應(yīng)商前綴。

此外，它允許你使用現(xiàn)代 CSS 功能，即使它們在你的目標瀏覽器上不受支持。

此外，你可能會研究預(yù)處理器，例如：as、less 或 stylus，但我們會將它們保存到以后的文章中。

我希望你覺得這篇文章很有用。如果是這樣，請務(wù)必在評論中告訴我。

感謝你的閱讀。

翻譯 | 楊小二

來自：Web前端開發(fā)