# CSS Guidelines

## 一般原則

* keep stylesheets maintainable 保持樣式表可維護
* keep code transparent, sane, consistent, and readable 保持程式碼透明、健全、一致和可讀
* keep stylesheets scalable 保持樣式表可擴充
* consistent syntax 語法一致
* consistent and meaningful commenting 一致且有意義的註解
* consistent naming 保持一致的命名

## 命名約定 Naming Conventions

* lowercase 小寫
* BEM-like naming for most classes BEM 式命名 -> class
* hyphen-delimited for everything else 其他內容以連字號分隔
* namespaces for almost everything 使用命名空間

## BEM

[BEM - HackMD](https://hackmd.io/KegM8cAPTXyKOfhXb9lhtg)

## 命名空間 Namespaces

| TYPE | PREFIX | EXAMPLES |
| ---------------- | ------------- | -------------------------- |
| Component | `c-` | `c-card` |
| Layout module | `l-` | `l-container` |
| Utility | `u- ` | `h-show` |
| States | `is-`, `has-` | `is-visible`, `has-loaded` |
| JavaScript hooks | `js-` | `js-tab-switcher` |
| | | |

參考：[More Transparent UI Code with Namespaces – Harry Roberts – Web Performance Consultant](https://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/)

## Stylelint

[Stylelint - HackMD](https://hackmd.io/DpGa0ZgtTBC41ThN2Ty-gQ)

## 參考
* [GitHub - chris-pearce/css-guidelines: Sensible CSS Guidelines for large scale projects 🚀](https://github.com/chris-pearce/css-guidelines?tab=readme-ov-file#css-guidelines)
* [Home | Stylelint](https://stylelint.io/)
* [Front-End Guidelines · GitHub](https://gist.github.com/stowball/6ca2fc1d868ebb049f043dbec782dd68#front-end-guidelines)

---
:question: 命名空間 Namespace 的定義
:question: 全域組件的命名 prefix: `knst-`, `g-`, `c-`