CSS 模組化管理 – week8 筆記

1 設計模式講解

  • SMACSS
    • 擴增子模組
    • SCSS 結構
  • OOCSS
    • 結構與樣式分離
    • 容器與內容分離
  • BEM ( Block 區塊、Element 元素、Modifier 修飾符 )。

    • __ 元素
    • –- 修飾符號
    .block{} //區塊 (Block)
    .block__element{} //元素 (Element)
    .block--modifier{}//修飾符(Modifier)

2 SCSS 分類

7+1 SCSS 設計模式

下方每個項目皆為一個資料夾

  • base ( 或 config 語意為環境設定或配置文件 ) : 全站設定。
    • _base.scss_site.scss 。例如 :body、a、img、h1 ~ h6 標籤設定等。
  • components ( 或 modules ) : 元件類、模組類。
  • utils ( 或 helpers ) : 工具類,裡面可放支援性質類的 scss。
    • _variables.scss_function.scss_mixins.scss 等( e.g. : .text-left{};、 .clear fix{}; 有點OOCSS的味道 )
  • layout : 例如 _layout.scss_footer.scss_grid.scs ..等。
  • pages : 較特別的網頁,只有此頁限定的特效可分別歸類於此。
  • vendors : 有另外導入插件
    • _bootstrap.scss_query-ui.scss ..等
  • themes : 網站上如果有多個顏色,可於此做管理 ( 老師較少用到 )

3 多國語系版面上該如何調整?

<!--共通 CSS-->
<link rel="stylesheet" href="global.css">

<!--languages CSS-->
<link rel="stylesheet" href="tw.css">
<link rel="stylesheet" href="en.css">
  • 會有一個共用的 CSS 寫在 global.css 內,其他語系的細部設定可寫在下方覆蓋掉上方的 global.css 樣式。

4 直接在 div 寫 style 背景圖

<div class="banner" style="background-image: url();"></div>

如果網站有後台,後端工程師可以不用再透過前端更換 CSS 圖片路徑,直接自己處理就可以了。

5 設計稿數值設定

建議設計師於設計稿皆使用 8 的倍數,不要使用奇數,會較方便於模組化細節呈現也會比較好。

6 統整

  • 不曉得怎麼分類的 scss 可放置 inbox.scss 搭配 Github 版控。
  • 斷點類可放 grid.scss 或 media.scss。
  • Page 與 Layout 的內容都盡可能使用 component 與 utilities。
  • Sass 常見錯誤

7 課間補充

  1. [Swiper.js](https://swiperjs.com/) 輪播套件使用方式
  2. 使用 jQuery 動態切換圖片

8 我的開發流程統整 – 簡易版

  • 統整設計稿 : 字型、字體大小、主題色、space、不同裝置中的 layout 版型、設計稿中的桌機平板手機斷點 ( 設計稿右方 " 布局網格 " 中開啟效果 )。
  • 下載 web layout training gulp master 資料夾 ( 使用 EJS 編譯 layout ) 或下載此資料夾內含 BS 不須 npm 下載 web-layout-training-gulp
    • 有時 npm install bootstrap 在 VS Code 的 node_modules 資料夾內沒看到 BS 的話,重新啟動 VS Code 即可。
$ npm install
$ gulp
$ npm install bootstrap
  • 複製 node_modules / bootstrap 中的 _variables.scss 到自己專案中進行客製 ( 路徑 : app\assets\style\utils )。注意 @import 到 all.scss 的必要檔案,可參考 BS / Theming : Importing ,當中的 _variables.scss 因為需客製所以換成自己專案的路徑。

資料來源

六角學院

文章

最後修改日期: 30 12 月, 2020

作者