---
# System prepended metadata

title: CSS 命名規範
tags: [深思設計]

---

# CSS 命名規範
## CSS 命名方式

以 - 作為連接用，開頭放同一詞，並使用駝峰方式，例如:

信用卡容器層creditCard-container
信用卡內容層creditCard-content

信用卡標題creditCard-content-title
信用卡內容creditCard-content-sub

- SCSS最多不超過4層，效能會影響到
- 習慣性註解備註分區域
- 同一元素的不同狀態 寫一起，除非通用才獨立寫 如下:

```jsx
.next-btn {
  background: linear-gradient(180deg, #e7b823 0%, #c97705 100%);
  &.notUse {
    background: linear-gradient(to bottom, #474747, #303030) !important;
  }
  &.use {
    background: linear-gradient(180deg, #e7b823 0%, #c97705 100%);
  }
}
```