CSS 剃刀

哲學中的「剃刀」是一種方法論原則，透過消除不必要的假設或選項來幫助簡化複雜的選擇。

最著名的是奧卡姆剃刀，它建議不要在不必要的情況下增加實體或假設：選擇最簡單、有效的解釋。

應用於CSS，這個想法建議簡化我們的樣式屬性選擇，以簡單有效的方式設計頁面，採用解決佈局問題的技術，而無需不必要的複雜性。

將哲學剃刀應用到 CSS 上，就是選擇最簡單、最有效的解決方案來解決佈局問題，而不用不必要的規則使程式碼過載。以下是如何有效地建立 CSS 屬性選擇，採用漸進式方法來保持簡單性，同時處理複雜的佈局要求：

優先考慮正常流程

正常流程是 HTML 元素在頁面上排列的自然方式，無需任何特定乾預。它是最簡單的基礎，應該是您建立佈局的起點。

• 塊：塊級元素（例如
  、

  、

  等）垂直堆疊，佔據全部可用寬度。

• 內聯：內聯元素（例如、）沿著文字的水平流彼此相鄰排列。

總是先看看是否可以透過簡單地使用這些自然行為來完成基本佈局。例如：

• 僅在內容就位後才使用容器或影像的 max-width 或 max-height 調整尺寸。
• 使用版式屬性（字體大小、行高等）來組織內容。

必要時切換到 Flexbox 或 Grid

當正常流程不夠時，Flexbox 和 CSS Grid 是處理更複雜佈局的強大工具。深思熟慮地使用它們，避免結構中不必要的複雜性：

• Flexbox 非常適合 一維 版面配置（行或列）：

  • 例如，要讓元素在容器內水平和垂直居中，請使用 display: flex 和 justify-content: center;對齊項目：居中；就足夠了。
  • Flexbox 擅長簡單佈局，其中元素之間的關係是線性的（例如，導覽列、對齊卡片等）。

• CSS 網格 更適合二維 佈局（按行和列排列元素）：

  • 使用網格進行更複雜的佈局，例如圖片庫或資料表。
  • 對於需要同時控制行和列的佈局，Grid 比 Flexbox 更強大。

這個想法是僅在達到正常流程的極限時才引入 Flexbox 或 Grid，避免在沒有真正需要的情況下在任何地方應用它們。

有關更多詳細信息，請查看 Josh Comeau 的這些優秀指南：

• Flexbox 互動式指南。
• CSS 網格互動式指南。

內邊距和邊距的句柄間距

要組織元素之間的空間，必須了解 padding 和 margin 之間的差異，並有條不紊地應用這些屬性：

• 填滿：管理元素內部元素內容與其邊框之間的空間。使用內邊距在內部內容和容器邊緣之間添加空間，例如在按鈕或卡片中。

• 邊距：管理元素外部元素邊框和周圍元素之間的空間。使用邊距將流中的元素彼此分開。

一般來說，內部空間使用填充，外部空間使用邊距。使用邊距來控制獨立元素之間的間距並預留填充來調整容器元素內部的空間通常會更清晰。

請參閱 Nathan Curtis 撰寫的這篇文章以取得視覺證明：設計系統中的空間。

使用位置值進行分層

CSS 中的定位允許更動態的佈局，但重要的是要避免過度使用它們。以下是如何在不同位置值之間進行選擇的方法：

• position: static（預設）：元素依正常流定位。

• 位置：相對：元素保持在正常流中，但可以偏離其原始位置。當您想要稍微移動某個元素而不影響其他元素的流動時，請使用它。

• 位置：絕對：元素從正常流中刪除，並相對於其第一個定位祖先（位置為：相對、絕對或固定）定位。它對於對元素進行分層或在容器內精確定位某些內容而不影響其他元素非常有用。

• 位置：固定：與絕對類似，但元素相對於瀏覽器視窗定位並在捲動時保持固定（例如黏性導覽列、彈出視窗）。

• position: Sticky：相對和固定的混合，它允許元素停留在流中，直到滿足特定條件（例如，當它到達特定的滾動點時，它變得固定）。它對於像導航列這樣需要在滾動後保持可見的東西很有用。

對於普通流程和 Flexbox/Grid 無法滿足要求的特定情況，請明智地使用定位。

具體範例：Flexbox 解決的黏性頁腳。

為流暢且響應式的佈局選擇適當的尺寸

為了確保版面保持流暢和反應靈敏，請使用靈活的單位，例如：

• %：百分比相對於父容器的大小，允許元素適應不同的螢幕尺寸。
• em 和 rem：這些單位相對於父元素的字體大小（或根元素的 rem 大小）。它們非常適合創建自適應尺寸，特別是間距（邊距、填充）和 100% 以外的尺寸（寬度、高度）。
• vw 和 vh：這些單位與瀏覽器視窗大小相關（1 vw = 視窗寬度的 1%，1 vh = 高度的 1%）。將它們用於適應整個螢幕尺寸的佈局。

除非絕對必要，否則避免使用 px 等固定單位，以確保設計在不同設備上保持流暢。

一個很好的用例：流體排版。

我的 CSS Razor 簡而言之

1. 從正常流程開始：使用區塊和內聯元素建立佈局基礎，只需調整顯示、寬度、高度。
2. 謹慎使用Flexbox或Grid：當正常流程不足時，切換到Flexbox進行一維佈局，或切換到Grid進行更複雜的二維佈局。
3. 聰明地處理間距：使用邊距將元素分開，並使用填充來管理容器內的空間。
4. 根據需要定位元素：使用相對進行細微調整，使用絕對或固定來調整正常流程之外的元素，並保持其他所有內容靜態。
5. 優先考慮流體單位：使用 %、em、rem、vw 和 vh 等相對單位來確保佈局流暢且適應性強。

透過遵循這種有條不紊的方法並盡可能地簡化，您將能夠設計有效的頁面，而不會陷入過度複雜的陷阱，同時確保程式碼的可維護性。

你的 CSS 剃刀是什麼？

以上是CSS 剃刀的詳細內容。更多資訊請關注PHP中文網其他相關文章！