英文 | https://javascript.plainenglish.io/learn-the-best-css-tricks-in-10-minutes-cfeb37489ae3
翻譯 | 楊小二
我在超過75000條的調查回複中發現，CSS的難度位居榜首，因為它是 Web 開發人員必須掌握和使用的技術，同時，也是他們覺得最痛苦的技術。并且他們還說CSS太混亂了，太難了。
甚至有人說CSS在設計上很糟糕，無法保護應用程式商店，但我認為 CSS 很棒，它絕對臃腫且難以全面學習，但這隻是因為它在過去 25 年中不斷發展的原因。
在 Netscape 是頂級浏覽器的時候，CSS就出現。響應式布局的想法已經過去十多年了，因為越來越多的浏覽器進入市場，他們都以不同的方式實作了 CSS，導緻代碼可以在一個浏覽器中運作，但在另一個浏覽器中，可能需要你編寫一堆浏覽器的字首，以使其在所有浏覽器上都能正常工作。
是以，我完全了解為什麼你會讨厭 CSS，但今天，我于分享的是一個小課程，你将學習如何使用現代功能編寫幹淨的 CSS，同時避免在 2021 年以及未來不應該編寫糟糕的代碼。
你需要知道的第一件事是如何學習 CSS，下面我們正式開始吧。
1、學習盒子模型
不學習 CSS 的方法是使用像 Bootstrap 或 Tailwind 這樣的架構，它們是可以幫助你快速獲得漂亮 UI 的性感工具。但是如果你在項目中使用像 Tailwind 這樣的東西，就像結婚一樣。一方面，你不會去學習 CSS 基礎知識，你會認為學習這個很順利；另一方面，如果你改變主意，你将不得不經曆一個非常痛苦的時期。
當學習基本的 CSS 時，你将更好地控制你代碼的創造力和自由度，直到我進入 Web 開發職業生涯後，我才得到的最好建議是學習 CSS 盒模型，因為當你了解它時，語言開始變得更有意義，事實上它很簡單，我現在就教你盒子模型，把每個 HTML 元素想象成盒子裡面的盒子 ，你有可以有寬度和高度的内容 ，你可以在周圍添加填充那個盒子來擠壓内容，然後，你可以在外面添加一個邊框，然後，在邊框周圍添加額外的不可見空間，稱為邊距。
CSS 中與布局和位置相關的所有内容都受框模型的影響，如果你打開 chrome 開發工具，你可以看到如何在頁面上的任何元素計算框模型。
2、 Firefox 很棒
這給我帶來了第二個提示，在調試 CSS 時不要使用 chrome，而Firefox，他們的開發工具通常更勝一籌，尤其是在 CSS 方面，如果我檢查元素，我會像在 Chrome 中那樣對框模型進行細分我還可以直接編輯它的屬性，Firefox 會為我提供影響框模型的所有屬性的細目分類。
它還在 HTML 中提供了有用的注釋，例如當一個元素導緻另一個元素溢出時，Firefox 還為 flex 和網格布局提供了非常漂亮的圖形，談到哪個布局或元素相對于彼此的位置曆來是最重要的布局之一。在具有挑戰性的 CSS 方面，例如如何在水準和垂直方向上居中 div 的古老問題。
3、 Flexbox 很棒
一種選擇是給子元素絕對定位，然後使用 top 和 left 屬性移動到右下角，然後将其轉換回50%，以将其放在可以工作的中心，但現代CSS有一種更好的方法是 使用flexbox，允許你在 UI 中的任何位置建立靈活的列或行，當元素具有顯示 flex 時，它還具有 x 和 y 軸，你可以在其上對齊其子項。
子元素以一種稱為主軸的方式流動，可以使用 justify-content 屬性在中心對齊，垂直于交叉軸，我們也可以使用 align-items 屬性将元素移動到中心。
當涉及到布局時，Flexbox 通常是我使用的第一個工具，但它确實有一個主要缺點，如果你有一個包含許多相交行和列的大型複雜 UI，你最終可能會在 HTML 中使用大量容器或包裝元素。
這些元素沒有語義意義，隻是在那裡，是以你的 CSS 代碼可以附加一些東西，幸運的是，有一個稱為網格的現代 CSS 功能可以消除你的大部分代碼。
4、Grid 很棒
Grid與隻處理單獨的列和行的 flexbox 不同，如果你是一個工作較長的 web 開發者的話，你可能會覺得Grid有點眼熟，因為它與表格布局非常相似。
Grid 允許你考慮大圖布局，當你将元素設定為顯示網格時，它對開發人員更加友好，你可以将其子項定義為一堆列和行。
列的寬度可以用網格模闆列屬性定義，我們在這裡有三個值：
由空格分隔，這意味着我們有三列注意 fr 值或小數機關将負責與網格中的其他列共享可用空間，我們還可以定義一些行，現在網格内的每個元素都将自動定位，但重要的是請注意，與 flexbox 布局或上帝禁止的表格布局相比，我們已經消除了大量的 HTML 和 CSS。
5、 Clamp it down
現在，當我們談論響應式布局時，有 90% 的時間我們談論的是根據裝置或視口上的可用空間來更改某些内容的寬度。有很多方法可以做到。
例如，你可能有一篇文章的首選寬度為 50%，但在小螢幕上，你希望将其固定為 200 像素或在大螢幕上固定為 800 像素，你可以通過編寫将有條件地應用 CSS 的媒體查詢來實作基于視口大小，唯一的問題是媒體查詢會讓你想要随着項目的增長而離開自己。
好消息是你可以使用 min、max 和clamp 等函數來扭轉局面。
我們可以重構這段代碼，将寬度設定為一個最小為 200 像素，最大為 600 像素的區間值，然後首選值 50% 将 13 行代碼變成一行代碼，以減少 92 行代碼。
說到代碼縮減，這是 CSS 中的一個小技巧，我們經常以這些非常長且難以閱讀的類名結束。
但是，你可以使用 emoji 字元作為類名而不是靈活的容器。
6、縱橫比單線
現在，如果你曾經不得不編寫保持特定縱橫比的響應式圖像或視訊，那麼下一個技巧真的會讓你大吃一驚，我最近不得不在 fireship.io 上這樣做，以嵌入具有 16×9 縱橫比的視訊，這需要hack，你在頂部放置 56.25 填充然後給子元素絕對定位。
今天，雖然不是所有地方都支援它，但我們可以使用寬高比屬性而不是填充廢話，我們可以在視訊上定義寬高比，我們就完成了。
消除 CSS 代碼是讓它更有趣的一個重要部分，但同樣重要的是讓你的代碼更靈活。是以重構不是一個徹底的噩夢，一個很好的方法是使用 CSS 自定義屬性或變量來實作。
7、 變量的變量
注意我們如何在多個地方使用相同的顔色值，如果我們決定更改顔色，我們需要修改引用它的每一行代碼，更好的方法是在根選擇器上定義一個全局變量。
然後，可以在任何需要的地方引用，現在當你決定更改它時，你隻需修改一行代碼變量級聯，就像 CSS 中的其他所有内容一樣，這意味着你可以通過在樹的更深處重新定義它們來覆寫它們：
你還可以将它們組合成更複雜的值，例如我們可以根據其他三個變量的值定義我們的 RGB 顔色，這種靈活性将通過允許你快速更換網站的不同主題來真正改變。
8、花式計算
現在，CSS 并不是傳統意義上的真正程式設計語言，但它确實具有使用 calc 函數運作基本計算的能力，它允許你使用一些基本數學計算一個值。但真正酷的是你可以結合使用不同的機關，比如你可能想從我們的代碼中的目前視口寬度中減去 50 像素，我們有一個動畫，其中元素從頂部下降。
但我們想錯開它們，讓它們一個接一個地出現。
實作這一目标的一種方法是為每個元素應用不同的動畫延遲，但這是非常重複且難以重構的。
一種更複雜的方法是為每個定義其順序的項目定義一個内聯 CSS 變量，然後我們可以将動畫延遲定義為順序變量 100 次毫秒的計算。
而且，現在我們可以處理無限數量的元素，而不會增加我們的 CSS 占用空間，這要歸功于 calc 和變量的組合能力。
9、計數器狀态
我剛剛說過 CSS 不是一種程式設計語言，但你是否知道它實際上内置了一個狀态管理機制，你可以在不編寫任何 JavaScript 代碼的情況下跟蹤 CSS 代碼中的運作計數。
如果你想在你的 HTML 中給标題編号，最簡單的方法是在 HTML 中手動添加這些數字。
是以，如果你想拼接一個新标題，則必須手動重新編号所有内容，一個更智能的方法可能是 CSS 計數器，你可以使用 counter reset 屬性在代碼中建立一個計數器。給出你想要的任何名稱，然後在應用所需的選擇器時增加它，它将從 0 開始，然後向 dom 中的每個 h1 元素添加 1。
現在你永遠不必擔心在你的 HTML 中給東西編号，在建構一個複雜的下拉菜單時，你可能會假設一些 JavaScript 涉及到管理菜單的打開和關閉狀态，但是你可能會驚訝于僅使用簡單的 CSS 就能做到多遠。
現在，你很可能熟悉，當你進入表單輸入或單擊按鈕時應用于元素的焦點僞類。
問題在于建構下拉菜單時，你可能會使用焦點打開菜單，但是當你單擊該菜單内的某些内容時，它會失去焦點并關閉。
那是當你使用 JavaScript 來管理狀态時，還有另一個稱為 focus-within 的僞類。如果任何孩子也有焦點，它就會保持活動狀态，并且一個簡單的功能可以消除許多用于切換狀态的 JavaScript。
這些方法可以讓你的 CSS 代碼更簡潔。
但請記住我在文章前面提到的那些浏覽器供應商字首的事情。
這些東西不會消失，幸運的是，我們确實有一些方法，可以使它幾乎不引人注目。你應該知道的一個工具是 post CSS，它本身使用稱為自動字首的工具來自動添加所有供應商字首。
此外，它允許你使用現代 CSS 功能，即使它們在你的目标浏覽器上不受支援。
此外，你可能會研究預處理器，例如：as、less 或 stylus，但我們會将它們儲存到以後的文章中。
我希望你覺得這篇文章很有用。如果是這樣，請務必在評論中告訴我。
感謝你的閱讀。
學習更多技能
請點選下方公衆号