標籤: oocss

0

鐵人賽 8 - CSS 框架架構參考 Bootstrap

Bootstrap 是目前我最喜歡的 CSS 框架。 雖說如此,我以往可是很討厭 Bootstrap 的,身為一名設計師希望能夠有更多自己發揮的空間,所以早期一直在避免使用 Bootstrap 這樣的框架,總認為這些框架做出來的設計都很像,還因此自己寫一個 CSS 框架。 經歷過了一段自幹的歷程,從新再研究了 Bootstrap 的框架才發現自己很多觀念上的不足如: 過度的 sass @extend (良好的 CSS 架構,不太需要使用 @extend) OOCSS 觀念不夠強 (結構與樣式並未良好的分離) 框架可用套件不足 (自幹的怎會有套件 @_@) Bug 發現慢 (多人開發的框架 bug 自然少)

0

鐵人賽 7 - CSS 框架架構參考 PURE CSS

在瞭解完 OOCSS 後,可以看看主流框架是不是有帶入其中之概念,接下來會介紹兩篇 PureCSS 與 Bootstrap,這兩者的簡單架構概念讓大家參考參考。 Pure CSS 算是很老牌的 CSS 框架,到目前使用者已少了許多,但架構到現在都很是非常直得學習,不需倚靠太多的工具,就能夠將 CSS 可用性發揮到最高,如果有朋友說要參考 CSS 的架構,相當值得學習的就是 PureCSS 及 Bootstrap。

0

鐵人賽 6 - CSS 的元件狀態

CSS 元件狀態重點可以分為兩部分,一個是原生的 CSS 偽類(Pseudo-classes),另一則是配合 Javascript 所提供的 Class,在這部分相當在元件的初始時,就同時完成兩個部分。

0

鐵人賽 5 - CSS 的命名技巧

程式語言的命名一直是個麻煩課題,除了要有良好邏輯外,還必須有大量的英文詞彙能力。CSS 雖然不需要有太深的邏輯,但由於上手容易,團隊合作的命名就容易被其他小夥伴所影響。 本篇透過圖文及小故事來介紹 CSS 命名概念,讓你與小夥伴的命名協作能力更順暢。

0

鐵人賽 4 - OOCSS 容器與內容分離 (最佳實踐)

結構與樣式分離,對於網頁的樣式設計是一種解放,所有元件的樣式組合搭配及擴增變得更自由。 這篇要介紹的是容器與內容分離,簡單來說我們可以把元件分為兩大類型: 容器型元件:如 grid、card、form 內容型元件:如 button、input、progress-bar 而不同類型的元件設計上應當分離,避免混寫限制元件的搭配。

0

鐵人賽 3 - OOCSS 結構與樣式、容器與內容(實際範例)

結構與樣式在執行的概念上就是這樣的白話,目標即是將這兩者分離,上一篇我們用建築物的結構與外觀樣式做分離,再依不同的需求去做組合。 CSS 上也是相同的道理,比如說我們可以做這樣的分類: 結構:margin、padding、display、vertical-align 樣式: 色彩樣式:color、background-color、border-color 尺寸樣式:font-size、height

0

鐵人賽 2 - OOCSS 結構與樣式、容器與內容

以前剛進入這行,掌握了 CSS2 的大部分關鍵之後,對於製作網頁非常有成就感,因為當時寫一個站不需要太多時間(整個網站約落在 800 ~ 1200 行 CSS),而且 CSS2 語法數量也不多,查找時間也不需要太長,自然覺得世界美好(!?) 這樣快速入門時會有一些難以發現的問題,網站是否易於維護、CSS 可複用性是否夠高、命名是否一致,當時也會思考這些問題,但在沒有統整性的觀念引導下,許多嘗試都是不斷的在碰壁。