iT邦幫忙

鐵人檔案

2017 iT 邦幫忙鐵人賽
回列表
Modern Web

CSS 實戰心法 系列

身為一名前端工程師,寫好 CSS 也是必須的,
還記得以前在寫 CSS 的時候,為了寫出好的 CSS 經歷過很多階段的磨練,像是苦練基本功、學好 sass、自幹框架、熟悉各種架構、配合各種環境等,到現在已經衍伸出屬於自己的心法,
接下來會介紹業界常用的技巧,來解決所遇到的問題:包含避免捅到自己。

鐵人鍊成 | 共 30 篇文章 | 194 人訂閱 訂閱系列文 RSS系列文
DAY 1

達標好文 前言,CSS 最重要的事?

鐵人賽系列文又開始囉,這次的主題是 CSS 你覺得 CSS 最重要的是什麼勒? 如果換個方式思考,寫 CSS 最 痛苦 的事情是什麼呢? 載入速度緩慢 遇到不...

2016-12-01 ‧ 由 卡斯伯 分享
DAY 2

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

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

2016-12-02 ‧ 由 卡斯伯 分享
DAY 3

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

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

2016-12-03 ‧ 由 卡斯伯 分享
DAY 4

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

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

2016-12-04 ‧ 由 卡斯伯 分享
DAY 5

小故事 + 圖文介紹 CSS 的命名技巧

程式語言的命名一直是個麻煩課題,除了要有良好邏輯外,還必須有大量的英文詞彙能力。CSS 雖然不需要有太深的邏輯,但由於上手容易,團隊合作的命名就容易被其他小夥伴...

2016-12-05 ‧ 由 卡斯伯 分享
DAY 6

CSS 的元件狀態

CSS 元件狀態重點可以分為兩部分,一個是原生的 CSS 偽類(Pseudo-classes),另一則是配合 Javascript 所提供的 Class,在這部...

2016-12-06 ‧ 由 卡斯伯 分享
DAY 7

CSS 框架架構參考 PURE CSS

在瞭解完 OOCSS 後,可以看看主流框架是不是有帶入其中之概念,接下來會介紹兩篇 PureCSS 與 Bootstrap,這兩者的簡單架構概念讓大家參考參考。...

2016-12-07 ‧ 由 卡斯伯 分享
DAY 8

CSS 框架架構參考 Bootstrap

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

2016-12-08 ‧ 由 卡斯伯 分享
DAY 9

CSS 實戰心法 搶到決定權,開發環境自己來

前端工程師一般來說只要搞定 HTML、CSS、Javascript 就可以了,所以後端的環境上不用太在意,但在這幾年的體悟下,這是一個不負責任的想法。 我用過的...

2016-12-09 ‧ 由 卡斯伯 分享
DAY 10

Gulp 與 Sass 開發環境

Gulp 是我目前最使用的自動化工具,在先前一篇也有介紹有哪些自動化工具,這篇開始會介紹 Gulp 自動化工具如何使用、有哪些推薦的工具以及一些經驗上的分享。而...

2016-12-10 ‧ 由 卡斯伯 分享