亂寫 CSS 有比亂化妝好嗎?

如果說 CSS 是主掌網頁外表的一個角色，亂寫 CSS 就相當於亂化妝的概念。

CSS 在撰寫上，整體來說是圍繞在處理特異性 Specificity。

小編接下來在這篇文章會開箱 9 種不是特別推薦的 CSS 寫法。

CSS 命名問題

首先是來探討萬年難解的命名問題，跟午餐、晚餐吃什麼是同等困難的事情?

CSS in JS 某些程度上就是為了解決這個問題而存在的。

不過時間管理大師的命名大概是會把 line 的聯絡人寫到大家都看不出來是誰。

命名太通用

.userPhoto 這個樣式檔在購物網站究竟是買家、賣家、系統管理者，都幾?!

.userPhoto {
  width: 94px;
  height: 87px;
}

解決方式，也許是用組合的方式 <img class="photo buyer__photo" />。

.photo {
}

.buyer__photo {
}

.seller__photo {
}

.admin__photo {
}

樣式重複

因為命名沒有規範，導致同樣的樣式可能被不同的工程師重複撰寫。

.container {
  background-color: #878787;
  max-width: 94.87px;
  border: none;
}

.card {
  background-color: #878787;
  max-width: 94.87px;
  border: none;
}

使用 SCSS 可以用 @extend 但產生出來的還是重複的 >.^

.container {
  background-color: #878787;
  max-width: 94.87px;
  border: none;
}

.card {
  @extend .container;
}

命名可以規範團隊使用原子化樣式來增加重用性

.bg-87 {
  background-color: #878787;
}

.bordor-none {
  border: none;
}

.max-width-9487 {
  max-width: 94.87px;
}

樣式之間的關係不明確

正常撰寫會像下面，其實單看樣式檔或是單看 HTML 蠻難知道相互關係。

<div class="sheets">
  <h1 class="title"></h1>
  <ul class="list">
    <li class="item active"><a href="#"></a></li>
    <li class="item"><a href="#"></a></li>
  </ul>
</div>

透過 BEM 可以看得出來 title 會被 sheets 影響 item 會被 list 影響。

<div class="sheets">
  <h1 class="sheets__title"></h1>
  <ul class="list">
    <li class="list__item list__item--active"><a href="#"></a></li>
    <li class="list__item"><a href="#"></a></li>
  </ul>
</div>

SCSS 巢狀 BEM 縮寫難搜尋

SCSS + BEM 雖然打的字變少不好搜尋，好處是改名字比較快，但搜尋的時候要找到 list__item--active 需要多一個步驟。

.list {
  display: flex;

  &__item {
    flex: 0 0 25%;
  }

  &__item--active {
    color: red;
  }
}

小編個人偏好這樣比較好搜尋 0.0

.list {
  display: flex;

  .list__item {
    flex: 0 0 25%;
  }

  .list__item--active {
    color: red;
  }
}

屬性設定

屬性在設定上如果有使用變數，大家最後都會感謝你。

屬性重複

有好幾個地方都需要將字體顯示為 #878787，比較不好的撰寫方式就是在每個地方都加上 color: #878787;。

如果突然需要更換顏色會需要動到很多地方，全部取代可能會出現預期外的錯誤。

#intro {
  color: #878787;
  font-size: 10px;
}

header {
  color: #878787;
  font-size: 20px;
  background-color: green;
}

#banner {
  color: #878787;
  font-size: 30px;
  background-image: url(images/banner.jpg);
}

更好的作法是將 #878787 設成變數，或是寫成一個獨立的 class .text-color。

:root {
  --color-text: #878787;
}

.text-color {
  color: #878787;
}

魔法數字

不解釋，但小編有時候被趕鴨子上架也是會寫 XDDD

.divBug {
  position: absolute;
  top: 94.87px;
}

.zIndexBug {
  z-index: 99999;
}

Specificity

CSS 最重要的就是在處理這個問題。

!important

有些時候你會想蓋掉前一個卻怎麼樣也蓋不掉這時候就會使用 !important，但如果大家都這樣用，就會變成兩個人掉到水裡請問你要救哪個的問題。

!important 的適用情境會適用在寫 Utility 的 CSS，將常用的樣式獨立並確保樣式能覆蓋上去。

header {
  color: #000000;
}

header.intro {
  color: #878787 !important;
  font-size: 20px;
}

多餘的選擇器

每個 class 本來就一定會接著某個 element 所以 h1.big 中的 h1 就是多餘的，只是練習打字並不會有太多的加分效果。

As It

h1.big {
}
ul.nav {
}
a.button {
}
div.header {
}

Should Be

.big {
}
.nav {
}
.button {
}
.header {
}

目標設太廣或太窄

在撰寫樣式檔以能夠重用的前提下，應該盡量減少使用 ID 選擇器和標籤選擇器。

若是想要直接全域改 HTML element，那最多就是使用 Reset css 或是其他套用框架幫你正規化。

底下這種影響範圍太大都是不建議的:

section {
  display: block;
}

figure {
  margin-bottom: 20px;
}

div {
  padding: 1em;
}

header {
  padding: 1em;
}

ID 則是範圍太小，但若是明確的知道就是只有這個，那也請斟酌的使用，舉例來說 React 的 root element 就蠻適合給 ID 的。

#onlyOne {
}