在這裡，我並不想評論 CSS 框架和庫的好壞，但一個不爭的現實就是，很多 Web 開發者很容易在眾多的 CSS 框架庫中迷失方向。甚至，每個框架和庫都向 Web 開發者承諾，將提供更簡單的樣式和更流暢的 Web 佈局。然而，在當下，現代 CSS 特性 提供了更簡單和更靈活的方法，你完全可以不依賴任何 CSS 框架庫就能構建出你想要的 Web 佈局效果！
當下的現實就是，大部分 Web 開發者過度依賴各種框架，包括 CSS 方面的框架或庫，來處理樣式上的事情，其中就包括為 Web 網站或應用構建佈局。儘管透過配置框架可以實現我們所需的功能，但試問你有多少次僅僅為了實現 Web 佈局而整合整個 CSS 框架或庫呢？我相信我們當中有許多人在某個時刻都這樣做過，甚至現在依舊還在這樣做。
今天，我想透過這篇文章告訴大家的是，現代 CSS 提供了很多優秀的特性，它們可以為 現代 Web 佈局 提供更好、更靈活的佈局方案，你完全無需僅為佈局而使用框架。而且這些特性，將為你對 Web 佈局獲得更大的控制權。
Web 佈局一直以來對於眾多 Web 開發者來說是具有一定的挑戰性，但隨著 現代 CSS 特性 的出現，這些挑戰逐漸變得越來越沒有難度。甚至包括很多 創意性佈局和異形佈局 ！
接下來，我們將會探討如何使用現代 CSS 特性為 Flexbox 和 Grid 佈局提供更強大的便利性，例如流體佈局和重複佈局。在這個過程中，我將整合 CSS 容器查詢，使這些佈局根據自身的大小而不是視窗大小進行響應，與此同時，還將應用 CSS 級聯層特性，進一步允許你控制樣式，防止樣式發生衝突。
這意味著，你需要對現代 CSS 的一些特性有一定的認識，易於幫助你更好的閱讀和理解下面的內容。如果你對現代 CSS 特性不怎麼熟悉，那麼個人強烈建議你購買我的小冊——《現代 CSS》，它將將使你深度掌握 CSS 各種最新特性。
有效利用 CSS 級聯層和變數特性
使用過 CSS 框架或相關方法論的開發者，對於 CSS 級聯層和變數這兩個概念不會感到陌生。因為大多 CSS 框架都會使用它們來管理和維護 CSS 。例如，ITCSS ，它就以下圖這樣的方式來管理 CSS：
如今，不需要這麼麻煩了，我們可以使用 CSS 的 @layer 規則 來管理 CSS。這個特性不僅可以使樣式整潔有序，還允許我們透過按特定的順序組織這些層來影響每個層的權重。這些使我們建立的 CSS 更易於維護，並可以輕鬆地整合到你的專案中，而且還不會遇到樣式權重的衝突。
在我們今天要聊的內容中，我認為以下三個層足夠了：
@layer reset, theme, layout;
排列在前面的層，其權重越低。因此，我把 reset 層排在第一，使其成為所有層中權重最低的一層；layout 層排在最後，使其權重最高，優先順序高於其他兩個層中的樣式。
注意，如果我們新增一個沒有層級的樣式，它將被統一放置在一個名叫匿名層中，其權重是最高的。
說實話，我現在戀上了這個級聯層規則，不管是在平時的專案中，還是在 Codepen 寫案例，我都習慣性的使用它來組織我的 CSS 程式碼。
非常遺憾的是，今天的主題並不是聊 CSS 的級聯層，因此我無法使用更多的篇幅來向大家闡述它。如果你想深入的瞭解她，請移步閱讀《CSS 分層：@layer》一文。
既便如此，還是要花點時間來聊聊這三個層在工作中應該如何使用。
reset 層比較好理解，這個層將包含我們希望“重置”瀏覽器樣式的樣式，比如你專案中的 reset.css 和 normalize.css 檔案中的程式碼就可以放在這個層中。當然，你也可以使用之前的方式，透過單獨的樣式檔案來“重置”瀏覽器預設樣式。但需要記住，在引入樣式檔案時，要是沒有使用級聯規則 @layer 定義它的層級順序，它將會被認為是匿名層級，具有最高的權重。這種情況之下，很有可能會給你造成一定的困惑。
不過，我個人習慣性喜歡在 reset 層中，使用簡單“重置”樣式，例如：
@layer reset { *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } }
這種方式簡單且粗暴，有時候也會使你為其他元素新增不少樣式。比如，為 p 、h1 ~ h6 等元素設定 margin 等。因此，你需要根據自己的習慣和專案環境，配置比較合適的“重置”樣式。
接下來是 theme 層。從其名應該大致知道這個層的作用。是的，它就是用來設定與主題相關的樣式，例如、顏色、間距等屬性。在這裡，我們在 :root 中定義一些與佈局相關的 CSS 變數。例如：
@layer theme { :root { --layout-fluid-min: 35ch; --layout-default-repeat: 3; --layout-default-gap: 3vmax; --layout-default-ram-size: min(100% - 2rem, 300px); } }
我習慣性在 :root 上定義這些與佈局相關的變數，因為佈局容器通常是許多其他元素的包裝器，全域性作用域可以確保變數在我們想要用的地方都可以被引用。不過，如果需要，也可以將這些變數作為區域性變數，用於指定的元素上。
注意，上面的演示程式碼，其中 layout- 字首只是用於標識，這些變數是用於佈局上的，你可根據自己的喜好來調整，比如使用一個簡寫的 l- 來表示。我更想說的是，雖然只是幾行簡短的示例程式碼，但它包含多個現代 CSS 特性：
-
CSS 自定義屬性，也俗稱 CSS 變數，它是以 -- 為字首定義變數名稱，然後透過 var() 函式來引用。有關於這方面更詳細的介紹，可以移步閱讀《CSS 自定義屬性你知道多少》和《CSS 自定義屬性可以用來做些什麼》
-
ch 和 vmax 都是現代 CSS 中相對單位，其中 ch 是字型相對單位，vmax 是視窗相對單位。除此之外，還新增很多相對單位，比如 cqw 、lh 等。有關於這方面更詳細的介紹，可以移步閱讀《現代 CSS 中的相對單位》
-
min() 函式是 CSS 的比較函式，與其同時出現的還有 max() 和 clamp() 函式。這三個函式在現代 Web 佈局中非常有用。例如，min() 函式，將會根據提供的引數列表中返回最小的值。有關於這方面的介紹，可以移步閱讀《CSS 的比較函式：min() 、max() 和 clamp()》
-
ram，它更專業的寫法是大寫的，即 RAM 。它表示的是現代 Web 佈局中的一個經典佈局技術。利用 CSS Grid 佈局中的 repeat() 和 minmax() 函式以及 auto-fit 或 auto-fill 屬性實現自動換行佈局（注意，不是文字換行）
是不是資訊量有點爆棚！
作者：大漠_w3cpluscom
連結：https://juejin.cn/post/7377355452890726409
來源：稀土掘金
著作權歸作者所有。商業轉載請聯絡作者獲得授權，非商業轉載請註明出處。