css

CSS Modules:babel-plugin-react-css-modules 小記

樣式管理一直是前端工程師的痛點(很煩 (╯‵□′)╯︵┴─┴),因此 CSS 的模組化方法從過去的 OOCSS、SMACSS,到近代的 BEM,還有最近的 CSS Modules 與 CSS in JS,企圖讓程式碼簡潔易懂、可重用,進而有效率地開發和維護。這裡記錄我的玩具「吃什麼,どっち」使用 CSS Modules 之 babel-plugin-react-css-modules 的實作過程。

CSS Modules CSS in JS babel react.js styled-components BEM css webpack Media Query 吃什麼 · 留言


PostCSS

PostCSS 是一個使用 JavaScript 轉換 CSS 的工具,它可以做的事情很多,像是加入各家瀏覽器的前綴詞(prefix)、將先進的功能轉為目前主流瀏覽器所能支援的語法、語法檢查和報錯、支援 Grid System、使用類似 SASS 的功能等。

PostCSS css webpack · 留言


改進渲染效能範例 2 - Newsticker

使用 Newsticker 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Chrome DevTools will-change requestAnimationFrame css css3 animations · 留言


改進渲染效能範例 1 - News Aggregator

使用 News Aggregator 作為改進渲染效能的範例,以下列出需要改進之處與解法,並附上測試結果。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Forced Synchronous Layout Layout Thrashing Chrome DevTools will-change requestAnimationFrame css css3 animations · 留言


如何優化像素管道的 Paint 和 Composite?

更詳細探討如何優化像素管道(Browser Rendering Pipeline)的繪製(Paint)和合成(Composite)這兩個階段。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Chrome DevTools will-change css css3 animations · 留言


如何優化像素管道的 Styles 和 Layout?

更詳細探討如何優化像素管道(Browser Rendering Pipeline)的樣式計算(Recalculate Styles)和版面配置(Recaculate Layout / Reflow)這兩個階段。

效能調校 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path Layout Thrashing Forced Synchronous Layout BEM Chrome DevTools css css3 animations · 留言


從 JavaScript 著手優化渲染效能

避免 Micro-optimization、requestAnimationFrame、JavaScript Profiler、Web Workers、JS Memory Management。

效能調校 轉譯效能 關鍵轉譯路徑 requestAnimationFrame Rendering Performance Critical Rendering Path Chrome DevTools javascript css3 animations css · 留言


從 App 的生命週期來看瀏覽器渲染效能優化

以更高階的角度來看如何優化效能-App 的生命週期,讓開發者在 App 生命週期的各階段對於優化工作能做更好的選擇。

效能調校 RAIL 轉譯效能 關鍵轉譯路徑 Rendering Performance Critical Rendering Path css3 animations css · 留言


關鍵轉譯路徑 Critical Rendering Path

現今裝置更新畫面的頻率是每秒 60 幀(60Hz 或稱 60fps),意即每幀運行的時間最多是 16.67ms。但瀏覽器不僅要渲染畫面,還有很多事情要忙,因此每幀運行的時間只能約 10 ~ 12ms。若瀏覽器拖太久才更新畫面,就會產生顫動(Juddering)。想提高更新畫面的頻率、避免顫動,就要了解瀏覽器如何渲染畫面。

關鍵轉譯路徑 轉譯效能 效能調校 Critical Rendering Path Rendering Performance Chrome DevTools Layout Thrashing Forced Synchronous Layout css3 animations css will-change flexbox BEM · 留言


如何提升動畫效能?

動畫效能優化筆記。這裡提供三個方向:使用 requestAnimationFrame、從瀏覽器渲染機制著手和使用 will-change。

效能調校 轉譯效能 關鍵轉譯路徑 css3 animations Rendering Performance Critical Rendering Path requestAnimationFrame will-change javascript css · 留言


CSS 的模組化方法:OOCSS、SMACSS、BEM、CSS Modules、CSS in JS

OOCSS、SMACSS、BEM、CSS Modules、CSS in JS … 這些規範(或稱心法、解法)存在的目的都是為了讓程式碼易懂、可重用,進而有效率地開發和維護。

CSS Modules CSS in JS css BEM styled-components react.js vue.js babel · 留言


BEM

BEM 是一種 CSS class 命名的設計模式,將介面切割成許多獨立的區塊,以區塊(Block)、元素(Element)和修飾子(Modifier)來命名,優點是以元件觀念進行開發,具有重用性。 它擁有 OOCSS 的架構清楚的美好,也沒有 SMACSS 複雜或令人混淆的部份,因此 BEM 是一個很優秀的 CSS 架構指南。

BEM css · 留言


建立一個 React Component 並發佈到 NPM 上

簡單記錄如何建立一個 React Component 並發佈到 NPM 上。

react.js styled-components npm css BEM · 留言


CSS3 Animation

使用 CSS3 Transition 和 Animation 製作動畫、效能優化。

css3 animations css 效能調校 will-change 關鍵轉譯路徑 Critical Rendering Path Chrome DevTools 轉譯效能 Rendering Performance · 留言


圖解 Flexbox 進階屬性

圖解 Flexbox 進階屬性。

flexbox css · 留言


圖解 Flexbox 基本屬性

圖解 Flexbox 基本屬性。

flexbox css · 留言


三天內學會 CSS3 動畫

一直以來我對 CSS3 動畫這件事情並沒有特別專注研究(如果需要也是用 JavaScript 完成 XD),直到最近因為工作需要才開始練習。以下紀錄一些我在這三天內看的資料和做的小練習(不是教學文)。

css3 animations css · 留言


Responsive Patterns: Layout

Responsive Patterns 是一個蒐集響應式設計與實作的元件庫,舉凡 Layout、Navigation、Forms、Carousel、Tabs、Accordion 和 Lightbox 等皆有,很適合當成學習教材。先來玩玩 Layout 吧 - 分成這幾類:Reflowing、Equal Width、Off Canvas、Source-Order Shift、Lists 和 Grid Block。

響應式網頁 Responsive Web Design Media Query css · 留言


利用 Bootstrap Grid System 排版的學習筆記

利用 Bootstrap Grid System 來排版真是一個方便的方法-若頁面上有許多小方格會隨著解析度而有不同的排列方式,就很適合用 Grid System 來排版。

Bootstrap Media Query 響應式網頁 Responsive Web Design css · 留言


Icon Fonts 教學

以往我們都是將小圖示(icon)用切圖的方式放入網頁,而我們也可以將這些 icon 用 CSS「畫」出來。

icon fonts css 效能調校 Loading Performance 加載效能 SVG · 留言