CSS 進階實戰｜靈活運用設計模式 x ITCSS 心法，打造最好維護的專案！

課程試閱搶先看！用預處理器 Sass 的變數一秒修改多個值

會寫 CSS 後，你還能知道怎麼寫出「高品質」的 CSS！

在前端開發的過程中，你是否得常常面對這些瓶頸：
1. 任何一點 CSS 修改都花費大量時間手動更新，還總是漏東漏西
2. 沒有可遵循的撰寫規則，命名、階層越來越混亂，網站效能越改越差
3. 仰賴框架卻也受限於框架，不熟悉最基本邏輯，修半天修出一堆 Bug

其實，再深入認識一下 CSS 就可以不用那麼累！
透過老師複合開發工具與設計思維的課程內容，一門課帶你走出 CSS 專案管理的窘境，擺脫和程式碼一起源源不絕增加的困擾。

從基礎開始系統性管理，專案開發維護不費力！

從變數定義與統一命名規則打好根基，寫出乾淨又好複用的的程式碼，和重工與低效率說掰掰。
只要你懂 CSS，CSS 就會幫助你！我們來看一張修改前後的對照圖：


只要透過 CSS 設計模式的正確規劃，就可以輕鬆達到以下幾點：
1. 清楚且直接地從 class name 辨別類型！
2. 各元件結構清楚，馬上判斷用途！
3. 增加屬性重用率，不再相同屬性寫好幾次！
4. 搭配 Sass 提升撰寫效率、便於維護！

跟著這堂課，你可以輕鬆學會以下觀念和技巧~
💡 使用業界主流預處理器 Sass 統一樣式、定義變數，輕鬆做到一鍵修改，又快又簡單！

💡 運用 OOCSS、SMACSS、Atomic CSS、BEM 等設計模式，由下而上開始建構， 統一命名規則，整體變得乾淨好懂，檔案還變小了！

💡 用國外最先進的 ITCSS 設計心法，CSS 架構分層清楚，可複用性大幅提升，獨立分離，局部想搬移到其他專案也 OK！

設計模式 - 經手再大的網站也能系統化管理 CSS 的秘訣

我們可以將 CSS 專案比喻為一間超市，CSS 程式碼是超市中的貨品，而 CSS 設計模式 (CSS Methodology) 則規定了所有貨品可依循的命名方式、分類及擺放位置。不同超市會採用不一樣的經營方法，但都能夠簡潔、有效率地管理複雜的品項，CSS 設計模式的作用便是如此。

根據 State of CSS 在 2021 年發布的前端工程師調查，業界前五大熱門 CSS 設計模式分別是：

• BEM
• Atomic CSS
• OOCSS
• SMACSS
• ITCSS

以上幾種設計模式針對 CSS 管理各有不同的邏輯與優勢，例如適用於大型網站，追求複用性極致的 OOCSS；也有提升易讀性，架構一看就懂的 BEM。儘管規則各有不同，但每一種 CSS 設計模式的最終目標，都是幫助工程師寫出容易複用與維護，乾乾淨淨的 CSS 架構。

根據每個專案各別的狀況與需求，可以援引合適的設計模式，又或是混合不同設計模式的核心原則加以應用。了解這些底層邏輯後，你能依據專案的特性手刻框架，也能遵循主流 CSS 框架採用的原理，另外寫出不相衝突的特製內容，避免暴力覆蓋後補不完的漏洞。

知名度不高滿意度卻名列前茅 - 冉冉升起的新星 ITCSS

ITCSS 近年越來越得到業界的青睞。State of CSS 的同一份調查中，儘管 ITCSS 的知名度與使用率在當時敬陪末座，但卻得到將近八成的滿意度，在相對小眾的用戶群中享有相當不錯的評價。

ITCSS 採用倒金字塔的概念，根據影響的範圍以及對某表現的針對程度，將 CSS 程式碼由廣至窄分層。就像一個漏斗，影響越小、作用範圍越特定、顯現樣式越具體的程式碼，會放在越下方的階層資料夾中。

這樣的系統能讓使用者循序漸進地建立架構，有邏輯地由大到小控制 CSS 的設定，還能明確地區分縱觀全局或精準微調的修改需求。

市面上第一堂！全面提升底層邏輯到設計思維的進階內容

針對想精進前端實戰經驗或開發效率的工程師設計，市面上第一堂結合開發工具與思維教學的 CSS 進階課程。

1. 研習開發技術：一步步帶你掌握業界最常用的 CSS 預處理器之一 Sass，將程式碼元件化，輕鬆調整網站全域的特定設定，提升開發與維護效率。
2. 建構設計思維：從 OOCSS、SMACSS、Atomic CSS、BEM 到 ITCSS，評析熱門 CSS 設計模式的優缺點，建構從底層邏輯開始的設計思維。
3. 手刻框架實戰：技術與思維併用，讓 Sass 與 BEMIT 在實務操作中相互配合，實際產出完整網頁，體驗 1+1>2 的效果。

從基礎開始系統性管理，日後專案處理再也不麻煩！

截長補短，運用 BEM 與 ITCSS 的組合技 BEMIT 手刻框架

課程最後，老師將手把手帶大家使用前面學習過的預處理器 Sass 以及 設計心法 BEMIT，挑戰手刻框架，實際製作一個包含商品頁、購物車與結帳畫面的簡易購物網站，課程結束時就能產出一個完整的作品，展現這一路累積的實力！

豐富的內容雙管齊下，帶你技術＋思維同步提升