關於 css 檔案的安排

css 當只有控制約 1 ~ 5 頁時

可以都寫在同一隻 css 檔案，

/* base 基本樣式，可以被覆蓋過去 */
body {}
h1, h2, h3, h4, h5, h6 {}

/* component 共用元件，可以被覆蓋過去 */
.btn {}
.card-group {}
.card {}

/* navbar*/

/* index 那一頁所有樣式 */
/* about 那一頁所有樣式 */
/* event 那一頁所有樣式 */
/* content 那一頁所有樣式 */
/* contact 那一頁所有樣式 */

如果覺得亂，就參考 5頁以上的規劃吧！

css 當控制約 6 頁以上時

假設有 10 頁的網站，
可以共用ㄧ支 base.css,
每一頁個別單獨ㄧ支 XXX.css

 base.css  /* base 基本樣式，可以被覆蓋過去 */
 |
 |- index.css - index.html
 |- about.css - about.html
 |- event.css - event.html
 |- content.css - content.html
 |- contact.css - contact.html

css 命名＆使用規則建立

有哪些方法：

• oocss

• 理解：使用 class 寫樣式，像是 class 的剪貼，想要紅色就剪下貼上，想要間距 10 % 就剪下貼上。
  • Tailwind CSS 充分展現，像是樂高的 class name。
  • bootstrap Utilities 有使用到。
  • 很適合快速切版，或臨時需要加。

• smacss (延伸、模組、架構)

• 分成 5 個類別，

• Base Rules

  • 基本樣式，可以被覆蓋過去

• Layout Rules

  • ㄧ區ㄧ區

• Module Rules

  • 一組一組

• State Rules

• Theme Rules

• Changing State：狀態改變的，如：

  • 動畫
  • js用到的 class,像是 .btn.btn-close ，可以 toggle 出現與消失
  • 偽類，像是 .btn:hover, .btn:focus
  • 媒體查詢 @media(max-width: 768px){ ... }

• bem (Block、Element、Modifier)

• 專屬名稱__第二層的物件--物件的形容、狀態

<ul class="nav">
  <li class="nav__item">index</li>
  <li class="nav__item nav__item--active">about</li>
  <li class="nav__item">contact</li>
</ul>

參考說明：CSS 的模組化方法：OOCSS、SMACSS、BEM、CSS Modules、CSS in JS

一個好的 css 命名應該是：

• 好預測
• 重複使用
• 好維護
• 好延伸
  from Kuro大簡報