iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 15
0
Modern Web

不只是寫寫CSS,切版概念30天系列 第 15

DAY15 - 實際切版的第一步:建立資料夾結構

  • 分享至 

  • xImage
  •  

不論你是用哪一種框架甚至是沒有框架進行切版,
基本上一定會有 html, css (scss/sass), javascript (ts)

切版的資料夾結構主要應該就是在css (scss/sass)這邊(因為切版會有大量的style要寫嘛)
那以我自己而言,我是用scss撰寫,一個看起來舒服的資料夾結構,可以參考一下css/scss的設計模式,
就像前面提到的,
我自己是習慣用 SMACSS 和 Sass 7-1 Pattern 的概念來做區分~

但因為實際的專案有的時候不會有這麼多類型的scss,因此我也是根據案子不一定會放滿七個資料夾
但基本上一定會有的就是
helper(abstract) -> 變數, mixin,
base -> 全站共用設定
layout -> 頁面layout (header, footer, page-layout)
components -> 元件

https://ithelp.ithome.com.tw/upload/images/20200930/20130079dOyvqG4hm0.png


上一篇
DAY14 -Postprocessor - PostCss 原理解析
下一篇
DAY16 - 實際切版第二步 - scss建立 variables 檔案
系列文
不只是寫寫CSS,切版概念30天30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言