個人的 CSS 習慣

  1. 1. 樣式彼此有關聯的做 nesting
  2. 2. 樣式排列順序
  3. 3. 整體樣式如下

這邊紀錄一下個人寫 CSS 時的習慣,不是 BEM、ATOMIC 那些命名,只是紀錄程式的排列方式,有些我也還沒嚴格遵守,透過這篇整理來做為往後的參考。

紀錄不包含 postcss 的部份

樣式彼此有關聯的做 nesting

忘記從哪篇文看到的,覺得不錯就習慣這樣了。

1
2
3
4
5
6
.class {
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
1
2
3
4
5
6
.class {
display: flex;
align-items: center;
justify-content: center;
flex: 1; /* 這部份受上一層 DOM 的影響,所以不做內縮 */
}
1
2
3
4
5
6
.class {
background-image: '';
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

樣式排列順序

  1. content:有 ::before::after 元件的話,如果有 counter- 之類會影響 content 的值就放在上面。
  2. position - toprightbottomleftz-index:如果沒有 position 那其他相關的數值就佔這個位置。
  3. display
  4. 與上一層的 display 有關聯的值。
  5. width
  6. height
  7. margin
  8. border
  9. padding
  10. background
  11. box-shadow
  12. color
  13. 隨意,只是要分好類,比如 font- 開頭的放一起。
  14. transform
  15. transition or animation

整體樣式如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
.class::before {
content: '';
position: absolute;
top: 0;
z-index: 0;
display: flex;
justify-content: center;
align-items: center;
flex: 1;
width: 100px;
height: 100px;
margin: 24px;
border: 1px solid orange;
padding: 24px;
background-image: '';
background-size: cover;
background-position: center;
background-repeat: no-repeat;
box-shadow: none;
color: #333;
/* 隨意 */
font-size: 12px;
font-weight: bold;
line-height: 1.2em;
/* 隨意 */
transform: translate(50px);
transition: all 200ms linear;
}

有想到其他的再補上,不知道 stylelint 能不能搞到這種程度。