改變遊戲規則的 CSS 實踐將提升您的程式碼水平

每個開發人員都曾經歷過——與 CSS 進行鬥爭，一開始看起來很簡單，但很快就變得難以掌握。在本指南中，我們將探討常見的 CSS 陷阱及其現代化的、可維護的解決方案。讓我們將您的 CSS 從有問題的變成專業的！

？每週將 CSS 技巧、程式碼片段和教學直接發送到您的收件匣 - 100% 免費！

1. 單位：擺脫像素

錯誤的方式：

.container {
    width: 1200px;
    font-size: 16px;
    margin: 20px;
}

更好的方法：

.container {
    width: 90vw;
    max-width: 75rem;
    font-size: 1rem;
    margin: 1.25rem;
}

使用相對單位使您的設計具有響應性且易於訪問。 REM 會根據使用者首選的字體大小進行縮放，而視窗單位可確保您的佈局適應不同的螢幕尺寸。始終考慮使用者可能會縮放或變更其基本字體大小。

2.CSS重置：重新開始

錯誤的方式：

/* Starting without any reset, relying on browser defaults */

更好的方法：

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

CSS 重置可確保在不同瀏覽器之間呈現一致的渲染效果。 box-sizing: border-box 屬性透過將內邊距和邊框包含在元素的總寬度中，使寬度計算變得直觀。

3. Flexbox 與 Float：現代佈局解決方案

錯誤的方式：

.container {
    overflow: hidden;
}
.sidebar {
    float: left;
    width: 300px;
}
.main {
    margin-left: 320px;
}

更好的方法：

.container {
    display: flex;
    gap: 1.25rem;
}
.sidebar {
    flex-basis: 18.75rem;
    flex-shrink: 0;
}
.main {
    flex-grow: 1;
}

Flexbox 以更少的程式碼提供了強大、靈活的佈局。它比浮動元素更優雅地處理間距、對齊和響應能力，並且在現代瀏覽器中得到更好的支援。

4. 色彩管理：一致性變數

錯誤的方式：

.button {
    background-color: #007bff;
}
.link {
    color: #007bff;
}

更好的方法：

:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
}

.button {
    background-color: var(--primary-color);
}
.button:hover {
    background-color: var(--primary-hover);
}
.link {
    color: var(--primary-color);
}

CSS 變數（自訂屬性）可以更輕鬆地保持一致的顏色並啟用主題切換。它們還使您的程式碼更易於維護並降低不一致的風險。

5. 媒體查詢：行動優先方法

錯誤的方式：

/* Desktop-first approach */
.container {
    width: 1200px;
}
@media (max-width: 768px) {
    .container {
        width: 100%;
    }
}

更好的方法：

/* Mobile-first approach */
.container {
    width: 100%;
}
@media (min-width: 48em) {
    .container {
        width: 90%;
        max-width: 75rem;
    }
}

行動優先設計可確保您的基本樣式適用於較小的設備，然後逐步增強較大螢幕的體驗。這種方法通常會產生更乾淨、更易於維護的程式碼。

6. 特異性：保持簡單

錯誤的方式：

#header div.navigation ul li a.active {
    color: blue;
}

更好的方法：

.nav-link--active {
    color: var(--primary-color);
}

較低的特異性使樣式更容易在需要時維護和覆蓋。使用 BEM 命名約定或類似的方法來創建有意義的、特定的類，而無需深層嵌套。

7. 版式：流體字體大小

錯誤的方式：

.container {
    width: 1200px;
    font-size: 16px;
    margin: 20px;
}

更好的方法：

.container {
    width: 90vw;
    max-width: 75rem;
    font-size: 1rem;
    margin: 1.25rem;
}

使用clamp()建立響應式排版，可以在最小和最大尺寸之間平滑縮放。這消除了僅針對字體大小進行多個媒體查詢的需要。

8. 網格佈局：正確的卡片系統

錯誤的方式：

/* Starting without any reset, relying on browser defaults */

更好的方法：

*, *::before, *::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

具有自動調整和 minmax() 功能的 CSS 網格會建立自動調整到可用空間的響應式佈局。這種方法需要更少的程式碼並能更好地處理邊緣情況。

9. 動畫：效能優化

錯誤的方式：

.container {
    overflow: hidden;
}
.sidebar {
    float: left;
    width: 300px;
}
.main {
    margin-left: 320px;
}

更好的方法：

.container {
    display: flex;
    gap: 1.25rem;
}
.sidebar {
    flex-basis: 18.75rem;
    flex-shrink: 0;
}
.main {
    flex-grow: 1;
}

指定動畫的確切屬性而不是使用全部屬性，並儘可能使用變換和不透明度，因為它們針對性能進行了最佳化。對於經常出現動畫的元素，請謹慎使用 will-change。

10. 組件變體的自訂屬性

錯誤的方式：

.button {
    background-color: #007bff;
}
.link {
    color: #007bff;
}

更好的方法：

:root {
    --primary-color: #007bff;
    --primary-hover: #0056b3;
}

.button {
    background-color: var(--primary-color);
}
.button:hover {
    background-color: var(--primary-hover);
}
.link {
    color: var(--primary-color);
}

使用 CSS 自訂屬性來減少程式碼重複並使元件更易於維護。它還可以更輕鬆地在整個設計系統中創建一致的變化。

結論

現代 CSS 提供了強大的工具，可以讓您的程式碼更具可維護性、高效能和可擴展性。透過遵循這些最佳實踐，您將建立更強大、更易於維護和修改的樣式表。請記住，我們的目標不僅僅是讓某些東西發揮作用，而是讓它對使用者和開發人員來說都能很好地發揮作用。

以上是改變遊戲規則的 CSS 實踐將提升您的程式碼水平的詳細內容。更多資訊請關注PHP中文網其他相關文章！