Knovour's Notes

個人的 Css 習慣

Knovour's photo
Knovour
·

1 min read

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

不包含 postcss 的部份

樣式彼此有關聯的做 nesting

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

.class {
  position: absolute;
    top: 0;
    left: 0;
    z-index: 10;
}

.class {
  display: flex;
    align-items: center;
    justify-content: center;
  flex: 1;  /* 這部份受上一層 DOM 的影響，所以不做內縮 */
}

.class {
  background-image: '';
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

樣式排列順序

  • content：有 ::before 或 ::after 元件的話，如果有 counter-之類會影響 content 的值就放在上面
  • position - top、right、bottom、left、z-index：如果沒有 position 那其他相關的數值就佔這個位置
  • display
  • 與上一層的 display 有關聯的值：比如 flex: 1
  • width
  • height
  • margin
  • border
  • padding
  • background
  • box-shadow
  • color
  • 隨意，只是要分好類，比如 font- 開頭的放一起。
  • transform
  • transition or animation

整體樣式如下

.class::before {
  content: '';
  position: absolute;
    top: 0;
    z-index: 0;
  display: flex;
    justify-content: center;
    align-items: center;
  flex: 1;
  width: 100px;
    min-width: 100px;
  height: 100px;
    min-height: 100px;
  margin: 24px;
  border: 1px solid orange;
  padding: 24px;
  color: #333;
  background-image: '';
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  box-shadow: none;
  /* 隨意 */
  font-size: 12px;
  font-weight: bold;
  line-height: 1.2em;
  /* 隨意 */
  transform: translate(50px);
  transition: all 200ms linear;
}

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

CSS