技術 OOCSS 結構與樣式、容器與內容

以前剛進入這行，掌握了 CSS2 的大部分關鍵之後，對於製作網頁非常有成就感，因為當時寫一個站不需要太多時間(整個網站約落在 800 ~ 1200 行 CSS)...

技術 CSS 框架架構參考 Bootstrap

Bootstrap 是目前我最喜歡的 CSS 框架。 雖說如此，我以往可是很討厭 Bootstrap 的，身為一名設計師希望能夠有更多自己發揮的空間，所以早期一...

技術 Day06::我所知道的 CSS設計模式和架構之OOCSS

從開始切版，我最容易遇到的問題就是⋯ 扣很髒很亂今天打的程式碼睡一覺醒來後就完全看不懂程式碼在寫些什麼切版都用不一樣的標籤，今天用header明天用top後天用...

技術 OOCSS 結構與樣式、容器與內容(實際範例)

結構與樣式在執行的概念上就是這樣的白話，目標即是將這兩者分離，上一篇我們用建築物的結構與外觀樣式做分離，再依不同的需求去做組合。 CSS 上也是相同的道理，比如...

技術 OOCSS 容器與內容分離 (最佳實踐)

結構與樣式分離，對於網頁的樣式設計是一種解放，所有元件的樣式組合搭配及擴增變得更自由。 這篇要介紹的是容器與內容分離，簡單來說我們可以把元件分為兩大類型： 容...

技術 DAY7-CSS結構化與命名技巧

CSS的優點就是很容易上手，很好使用，無論怎麼命名、怎麼使用，只要對應的到都可以。甚至如果有相同的命名，還會去計算權重，使用權重最高的那個。幾乎不用擔心會出錯，...

技術 [Day 08 - CSS Architecture] CSS設計模式，擺脫義大利麵代碼

當別人說你的程式是義大利麵代碼 (Spaghetti code)，聽起來很好吃，應該是稱讚的意思吧！千萬不要誤會，那是在說你的程式碼雜亂無章、難以理解。 在前面...

技術 OOCSS 基礎介紹 DAY39

OOCSS 也是一種設計模式它強調兩點 結構與樣式分離 容器與內容分離 在我們介紹 容器與內容分離 之前我們時常在寫css的時候會 .header...

技術 #12 CSS 設計方法與命名建議：OOCSS、SMACSS、BEM、RSCSS

本篇同步發表於我的 Hashnode 部落格：Eva Chen | 網頁設計師下班後 (hashnode.dev) ↓ 今日學習重點 ↓ 了解 CS...