【CSS】css rules guidelines

CSS 規範

CSS 規範使 CSS 文件具有一致性。它們有助於擴展和維護項目。推薦的 CSS 規範如下

BEM

BEM —— Block（塊）、Element（元素）、Modifier（修飾符）—— 是最流行的 CSS 規範之一。它是一組命名約定，你可以使用它們輕鬆地設計可複用組件。命名約定遵循以下模式：

.block { ... }
.block__element { ... }
.block--modifier { ... }

• .block 塊代表一個組件。它們是獨立的實體，並且對自身有意義。
• .block__element 這些是 .block 的一部分。它們沒有獨立的含義，必須綁定到一個塊上。
• .block--modifier 它們被用作塊或元素的標誌。我們可以使用它們來改變元素的外觀、行爲或狀態。例如，要使用隱藏標記，我們可以命名爲 .block--hidden

屬性排序

將紛繁的 CSS 樣式屬性進行合理地排列，outside in，由外向內，從元素與外界的關係，是否會影響外部佈局，到外邊距，內邊距等

1. 佈局相關(position, float, clear, display)，因爲元素的佈局會對對相鄰元素產生影響，自身甚至會脫離原來的文檔流，所以比較重要
2. 盒模型相關(width, height, margin, padding)
3. 外觀 (color, background, border, box-shadow)
4. 文字排版 (font-size, font-family, text-align, text-transform)
5. 其他 (cursor, overflow, z-index)

.button {
    display:inline-block;
    margin:1em 0;
    padding:1em 4em;
 
    color:#fff;
    background:#196e76;
    border:0.25em solid #196e76;
    box-shadow:inset 0.25em 0.25em 0.5em rgba(0,0,0,0.3), 
               0.5em 0.5em 0 #444;
 
    font-size:3em;
    font-family:Avenir, Helvetica, Arial, sans-serif;
    text-align:center;
    text-transform:uppercase;
    text-decoration:none;
}

使用標籤代替 CSS

實際的 CSS 應用。這經常被忽略。通常，你可以簡單地通過使用正確的 HTML 標籤來減小 CSS 包的大小。假設你的標題包含以下規則：

span.heading {
    display: block;
    font-size: 1.2em;
    margin-top: 1em;
    margin-bottom: 1em; 
}

你使用了一個 span 標籤作爲標題。你重寫了默認的顯示、間距和字體樣式。這可以通過使用 h1、h2 或 h3 來避免。默認情況下，它們具有你試圖用其他標籤達到的樣式。你可以立即少寫四條不必要的樣式規則，初探 · HTML5語義化