最近在思考要怎樣規劃一個好的CSS架構與命名，找了一些資料統整一下方便查找
一個好的 CSS 架構可以方便網站如需外包或其他人加工編寫等，容易查找與修改，而我之前做的都是~~~連我自己都會找不到哈哈!!
所以每一個細節都要好好規劃才對。細心的規劃能提供下列的好處：
更少的樣式
更少的樣式衝突
更長的維護週期
更快的提升新團隊成員
團隊成員之間更容易交流
更平穩的專案交接
CSS 規則的型別：大多數是基於 SMACSS 推薦的做法,確保每一個風格都適合這些類別之一。
基本樣式 (Base Styles)
物件 (Objects) o-
元件 (Components) c-
狀態 (State) .is- 或者 .has-
主題 (Themes) .t-
工具集 (Utilities) .u-
JavaScript (JavaScript hooks) .js-
理解這些分類和目的,將有助於你寫出更高抽象層次的樣式。
使用匯入,你能將你的樣式分解到多個檔案中。
@import “variables”;
@import “mixins”;
@import “normalize”;
@import “typography”;
@import “headings”;
@import “headings”;
@import “layout”;
@import “carousel”;
link跟@import有文章說不要同時用，全部都用@import還可以，要同時用效能會比較差。
CSS樣式表文件命名：
- 主要的 master.css
- 模塊 module.css
- 基本共用 base.css
- 佈局、版面 layout.css
- 主題 themes.css
- 專欄 columns.css
- 文字 font.css
- 表單 forms.css
- 補丁 mend.css
- 打印 print.css
頁面結構
- 容器: container
- 頁面外圍整體布局寬度：wrapper
- 頁頭：header
- 內容：content/container
- 頁面主體：main
- 節：section
- 頁尾：footer
- 側欄：sidebar
- 欄目：column
- 子頁面：subpage
導航
- 導航：nav
- 主導航：mainbav
- 子導航：subnav
- 頂導航：topnav
- 邊導航：sidebar
- 左導航：leftsidebar
- 右導航：rightsidebar
- 菜單：menu
- 子菜單：submenu
- 摘要: summary
功能
- 標誌：logo
- 廣告：banner
- 登陸：login
- 登錄條：loginbar
- 註冊：regsiter
- 搜索：search
- 購物：shop
- 標題：title
- 加入：joinus
- 狀態：status
- 按鈕：btn
- 滾動：scroll
- 標簽頁：tab
- 文章列表：list
- 提示信息：msg
- 當前的: current
- 小技巧：tips
- 圖標: icon
- 註釋：note
- 指南：guild
- 服務：service
- 熱點：hot
- 新聞：news
- 下載：download
- 投票：vote
- 合作夥伴：partner
- 友情鏈接：friendlink 或 link
- 版權：copyright
- 關於我們：aboutus
- 網站地圖：sitemap
- 統計：count
- 指南：guild
- 特別的：spec
- 資源：source
- 箭頭：arrow
- 表單：menu
- 子表單：submenu
- 下拉：drop
- 下拉表單：dropmenu