前端三分鐘

什麼是 CSS in JSCSS in JS 解決了 CSS 命名的問題。 由於 component-based 的概念興起元件開發成為顯學，CSS in JS 提供了將樣式寫在元件中解決方案，也讓 CSS 需要從寫程式語言的角度去進行架構設計。 CSS in JS 不僅降低了維護難度也加速了開發速度，減少檔案切換和減少 class 命名錯誤等等問題，常見的 library 像是 css m......

小編曾介紹過 CSS 的設計模式，這篇就讓小編開箱那些年小編曾體驗過的 CSS 主流框架: Tailwind CSS PureCSS Bootstrap animate.css 大家在寫 CSS 的過程，應該都會經歷幾個階段: 都不太會寫，先找個大家常用的套件 => 你寫的網站好 Bootstrap 開始用一些原生的寫法，寫著寫著就變成龐然大物幾千行的程式碼 開始把 C......

隨著 CSS 開始越來越複雜，由於 CSS 語法受限而發展出了 CSS Pre-/Post-processors (預處理和後處理) 來拓展和優化寫法。 什麼是 Preprocessor (預處理器)CSS 預處理器是個能透過該預處理器語法，產生純 CSS 的程式。 CSS 預處理器主要有 Sass/SCSS、Stylus、Less 三種。 處理器會加入 CSS 所沒有的......

本篇文章將提到怎麼透過 BEM、SMACSS、OOCSS、Atomic CSS 的特性來: 縮短開發時間 減少需維護的程式碼 結構與樣式 CSS 選擇器和規則們就像女孩化妝桌上的化妝品們，桌上總是放著各個種類，數也數不清大罐小罐擠的噴的擦的，在沒有預備知識和整理規劃的情況下，若要一個男孩子短時間搞清楚簡直是天方夜譚。 當交接新專案的時候看到幾千行的樣式檔大概也是這樣的心情，一般專案在未規......

CSS 層疊樣式表CSS (Cascading Style Sheets) 層疊樣式表，不像 HTML 一樣是標記語言，也不是標準的程式語言，但在 SCSS、CSS in JS、CSS Module 的出現後也可以用程式語言和架構的角度來看待。 CSS 就像是女孩子的各種化妝品，將臉上的各個部位進行妝點，網站透過 CSS 易容術後通常會是煥然一新的樣貌。 CSS 主要會透過 DOM 的選擇器......

什麼是 HTML底下用三句話來說明什麼是 HTML HTML (HyperText Markup Language) 是一種基礎技術是 “標記” 語言。 HTML 透過標記來描述網站應該由哪些元素所構成。 HTML 常與 CSS、JavaScript 搭配使用於設計網頁、網頁應用、行動應用的使用者介面。 舉個例子來說，之前看到我朋友在某個狗狗交友軟體的幾個標記: #學習建立持續不斷的踏實......

網站由網頁組成，網頁是構成網站的基本元素，網頁會是以檔案形式存放在伺服器。 網頁構成 HTML：透過標籤描述網頁架構與組成 CSS：視覺呈現，像是設定設置版面編排、文字背景顏色等 JavaScript：呈現網頁動態效果動作與各種互動功能 用比較生活化的例子來譬喻，身為一個男孩子要怎麼讓女孩子能夠認識你呢? HTML 是什麼?HTML 在網頁中是透過標籤來描述架構與組成。 舉例來說 #兒子 ......

雲原生 (Cloud Native)雲原生 (雲端 + 原生) 是在雲端原生架構上來規劃設計更方便擴展 (Scalable) 的軟體服務或應用。 為什麼會演變到雲原生 (Cloud Native)? 這跟軟體的開發、架構、運算和儲存單元演進有關 軟體開發: 瀑布式開發 -> 敏捷式開發 -> DevOps 軟體架構: 單層式架構 -> 多層式架構 -> 微服務 運算......