[前端自學轉職攻略] 18. CSS 框架/工具要怎麼選?

更新 發佈閱讀 1 分鐘
了解不同 CSS 框架/工具的差異


多嘗試不同 CSS 框架


不同於前端框架(JavaScript),各種 CSS 框架提供了不同的解決方案,其適用的情境也各不相同。因此,了解各種技術及各自的適用情境非常重要。



UI 元件庫


對不擅長設計的人,使用現成的 UI 元件庫(如 Ant Design 和 Bootstrap)可以快速提升專案的專業度。實務上,許多後台系統也會直接使用現成的元件庫來加速開發流程。


CSS module

由於主流前端框架普遍採用元件化的開發方式,CSS Module 成為一種常見,用於避免 CSS 全域污染的解決方案,建議花時間了解其原理。


CSS-in-JS


學習 React 的人,建議可嘗試看看 CSS-in-JS,配合上 jsx 可將 HTML, CSS, JS 全部整合起來,也是一種常見的開發方式。


TailwindCSS


TailwindCSS 的寫法雖然不是每個人都認同,但普及度高,學習難度也不大,可以嘗試看看,去理解其設計理念與優缺點。


前處理器:SCSS/SASS/LESS


雖說原生 CSS 支援的功能越來越多,但用到 CSS 前處理器的專案還是不少。這部分建議學 SCSS 而非 SASS/LESS,因其語法與原生 CSS 相近,容易上手。

另外,進階功能(如 function, if-else, for …)要審慎使用,避免 over-engineering 而導致程式碼難以維護。


後處理器:PostCSS


當只需要一、兩個原生 CSS 以外的功能時,PostCSS 是不錯的選擇之一。

留言
avatar-img
留言分享你的想法!
avatar-img
前端轉職經驗談
5會員
41內容數
零基礎到成功轉職,一路上會遇到哪些挑戰、應該如何解決? - 猶豫階段:「這適合我嗎?薪水如何?...」 - 起步階段:「怎麼開始學?要不要做 side project?...」 - 成長階段:「如何優化開發效率?選擇框架?...」 - 面試階段:「怎麼準備技術和行為面試?...」
前端轉職經驗談的其他內容
2025/03/09
原文:HOW TO GET STARTUP IDEAS 原文是針對如何找出創業的題目,不過如果想做 side project 卻苦無想法的話,也可以參考看看。 獲得創業點子的方法不是刻意去想創業點子,而是尋找問題,最好是你自己面臨的問題。 最優秀的創業點子通常具有三個共同點: 這是創辦
2025/03/09
原文:HOW TO GET STARTUP IDEAS 原文是針對如何找出創業的題目,不過如果想做 side project 卻苦無想法的話,也可以參考看看。 獲得創業點子的方法不是刻意去想創業點子,而是尋找問題,最好是你自己面臨的問題。 最優秀的創業點子通常具有三個共同點: 這是創辦
2025/02/02
學習 JavaScript 時,理解語法和概念是一回事,實際應用又是另一回事。許多初學者會遇到「看得懂範例,但自己寫不出來」的困境。因此,本文從實際開發的常見情境中,簡化出了 10 個範例,讓你能夠逐步練習,慢慢熟悉寫程式的思考方式。
2025/02/02
學習 JavaScript 時,理解語法和概念是一回事,實際應用又是另一回事。許多初學者會遇到「看得懂範例,但自己寫不出來」的困境。因此,本文從實際開發的常見情境中,簡化出了 10 個範例,讓你能夠逐步練習,慢慢熟悉寫程式的思考方式。
2025/01/30
每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。
Thumbnail
2025/01/30
每年一次的 State of JS 問卷調查,不只是觀察前端技術趨勢的工具,更是檢視自身技能與學習方向的絕佳機會。透過這份調查,你可以了解前端生態的變化,確保自己沒有錯過重要資訊,並規劃未來的學習路線。
Thumbnail
看更多
你可能也想看
Thumbnail
金馬獎呼喚大家走進戲院,但Youtube、Netflix已成日常。最新研究顯示,臺灣VOD訂閱戶破700萬,年產值近百億。在全球影視產業洗牌之際,臺灣如何運用國際資金與平臺,將在地故事推向世界?專家點出,理解演算法、克服盜版、制定對接國際的政策是關鍵。
Thumbnail
金馬獎呼喚大家走進戲院,但Youtube、Netflix已成日常。最新研究顯示,臺灣VOD訂閱戶破700萬,年產值近百億。在全球影視產業洗牌之際,臺灣如何運用國際資金與平臺,將在地故事推向世界?專家點出,理解演算法、克服盜版、制定對接國際的政策是關鍵。
Thumbnail
本文探討臺灣串流平臺的發展現況、競爭格局,並解析其帶來的經濟效應。透過美國電影協會(MPA)的講座內容,結合業界專家意見與生活觀察,文章揭示串流平臺如何影響內容製作, 同時討論臺灣有利的創作環境,包括自由的風氣和開放的政策,對於提升國家軟實力與國際影響力的重要性。
Thumbnail
本文探討臺灣串流平臺的發展現況、競爭格局,並解析其帶來的經濟效應。透過美國電影協會(MPA)的講座內容,結合業界專家意見與生活觀察,文章揭示串流平臺如何影響內容製作, 同時討論臺灣有利的創作環境,包括自由的風氣和開放的政策,對於提升國家軟實力與國際影響力的重要性。
Thumbnail
在香氣的語言裡,有一個我一直深深著迷的字:sillage。 "Sillage" 是法文,主要有兩種意思:一是香水留下的「香跡」,指香水揮發後在空氣中留下的香味,指香水使用者離開後,在空間中留下的香味軌跡,俗稱「香水光環」。 二是船隻的尾跡:這是"sillage" 的原始法文意義,指船在水中前進時
Thumbnail
在香氣的語言裡,有一個我一直深深著迷的字:sillage。 "Sillage" 是法文,主要有兩種意思:一是香水留下的「香跡」,指香水揮發後在空氣中留下的香味,指香水使用者離開後,在空間中留下的香味軌跡,俗稱「香水光環」。 二是船隻的尾跡:這是"sillage" 的原始法文意義,指船在水中前進時
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
這節課的學習目標是了解 CSS 的基本語法結構和使用方法。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
CSS 是控制網頁外觀的語言,應用於網頁設計、UI/UX 設計、電子商務和移動應用開發。主要使用者包括前端開發者、UI/UX 設計師和網頁設計師。CSS 的特性有樣式控制、層疊優先級、響應式設計及分離內容與樣式。
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
你好,在下最近在學習開發web,學了html css js,也得出一些心得,由於網路上已有許多教學,所以我會著重在如何開發出to do List,以及解釋我寫的程式碼。相關的教學我會直接貼網址。如果我有什麼地方出錯,或者是可以寫得更好,歡迎在下方留言,討論。 首先先介紹我的開發環境: 我用了vs
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
這篇文章分享了 CSS Battle 第 38 題的解法,並提供了相關的技術總結。文章內容包括了使用 flex 排版處理、背景漸層的方法處理等相關技術。透過這篇文章可以學習到如何解決 CSS 切版的問題。
Thumbnail
本文介紹了CSS Battle 17的挑戰題目,並提供瞭解題的技巧和方法。內容包括基本排版、圖形解構能力和技術總結。歡迎大家分享自己的解法與作者交流。
Thumbnail
本文介紹了CSS Battle 17的挑戰題目,並提供瞭解題的技巧和方法。內容包括基本排版、圖形解構能力和技術總結。歡迎大家分享自己的解法與作者交流。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
CSS 的繼承性是開發網頁樣式時的一個重要概念,它使得樣式設計更加靈活和高效,有助於提高程式碼的可讀性、一致性和可重用性,並加快開發速度,從而提供更好的開發體驗。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
軟體系統的發展歷程大多相似,首重解決基本需求、提供操作介面,進而提升安全性、擴充功能、優化操作。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
這是一篇關於CSS Battle系列的文章,介紹瞭如何通過CSS來處理特定圖案的切版與前端工程技術。文章分享了使用grid和radial-gradient()方法來處理特定圖案的解法以及相關技術總結。
Thumbnail
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
Thumbnail
前端工程師需要時不時拿出來打磨基本功。本文分享了從#18問題來提供的CSS Battle的題目作法,並介紹了grid的使用方式,以及nth-of-type的應用。這題算是蠻能鑑別你對基本CSS常用排版的熟悉程度。歡迎大家分享自己的作法與我交流 !
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News