標籤：

前端每周清單半年盤點之 CSS 篇

01-31

前端每周清單專註前端領域內容，以對外文資料的搜集為主，幫助開發者了解一周前端熱點；分為新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峰人生等欄目。歡迎關注【前端之巔】微信公眾號（ID：frontshow），及時獲取前端每周清單；本文則是對於半年來發布的前端每周清單中的 CSS 相關的教程實踐與開源項目的盤點，可以查看這裡獲得往期清單或者其他盤點篇。

教程實踐

  • 《2017 前端開發手冊》：Front-End Developer Handbook 2017 由 Cody Lindley 編寫，面向每一個希望學習前端的開發者。該手冊概括地討論了前端工程化的相關實踐：在 2017 年中我們應該使用哪些前端工具以及如何學習去使用這些數據。該手冊的內容包含了 Web 技術的基礎：HTML、CSS、DOM 以及 JavaScript，以及基於這些技術構建的優秀開源項目。
  • 《Web APP 實現水平滑頁翻頁交互效果的要點解析》：本文是張鑫旭老師分享的起點中文網支持水平滑頁閱讀效果的實踐，其核心是利用 CSS3 column 分欄布局。CSS3 column多欄布局是支持比較早的CSS3布局方式，目前IE10+以及其他所有現代瀏覽器都支持，IE瀏覽器不需要私有前綴，FireFox和Chrome雖然現在也不需要，但是，考慮到移動端以及可能一些用戶瀏覽器升級不及時的現狀，因此，-webkit-以及-moz-前綴目前還不能省略。
  • 《掌握 CSS Animation》: 利用 Keyframes 以及各種各樣的動畫屬性：timing、delay、play state、animation-count、iteration count、direction、fill mode、will change 來構建交互動畫。
  • 《CSS Grid 指南》: 網格系統是布局設計的核心之一，在 Web 開發中我們經常需要藉助第三方庫來創建合適的網格系統。而 CSS Grid 則是一個二維布局系統，能夠輔助開發者創建基於網格的用戶界面，此文則是詳細地介紹 CSS Grid 的語法細節以及調試實例。( https://tympanus.net/codrops/... )
  • 《Flexbox 語法清單》：該網頁提供了互動式的 CSS Flexbox 教程，詳細介紹了 Flexbox 的使用語法與經典案例。( http://yoksel.github.io/flex-... )
  • 《另一種 CSS 壓縮思路》：本文作者提出了一種新的 CSS 壓縮思路，有可能會損壞原有的 CSS 文件，不過其壓縮比率相較於現有的通用 CSS 壓縮策略會更為優秀。( luisant.ca/remynifier )
  • 《Animista》：Animista 是開箱即用的 CSS 動畫庫，其作者還發布了非常易用的在線預覽與選擇站點，適合於設計人員選擇合適的動畫效果。( animista.net/ )
  • 《CSS Grid 典型案例》：該網站提供了一系列基於 React 編寫的 CSS Grid 布局的測試樣例，是個不錯的從實例中學習 CSS Grid 語法與使用的教程。( https://sii.im/playground/css... )
  • 《8 個可能你沒考慮過關於 CSS 的知識》：不同的技術學習曲線可能相差甚遠，而 CSS 的初學者則會覺得相當容易入手，但是深入之後可能發現連居中都不甚容易。本文作者是個深度 CSS 熱愛者，他從自己多年的經驗介紹了 CSS 中的垂直居中、100% 屬性、float、z-index 等等多個細節知識點。（ parg.co/bhl ）
  • 《實例講解 CSS 盒模型》：有經驗的前端開發者都知道 HTML 中的布局就是盒套盒，而本文則是以某個街區的例子深入淺出地講解 CSS 中的盒模型。（ parg.co/bhN ）
  • 《構建高性能擴展與摺疊動畫》：本文以菜單伸縮動畫為例，介紹如何構建高性能擴展與摺疊動畫。較簡單但是性能有缺陷的方式譬如修改元素寬高或者使用 clip 變換屬性；而本文主要是由 CSS3 的 scale 變換來實現菜單的擴展與摺疊，其為了保證菜單按鈕的視覺效果與整體的平滑縮放還使用了所謂的對沖縮放技巧。( parg.co/bCz )
  • 《使用 CSS Grid 打造私家花園》：本網站是個非常不錯的互動式學習 CSS Grid 的站點，其以 28 個互動的花園小遊戲來帶你一步一步學習 CSS Grid 的語法與實踐。( cssgridgarden.com/ )
  • 《隱藏幕後的 CSS 知識點》：在我們日常的開發中，往往關注於讓界面看上去符合預期，而往往不會去關注那些隱藏的屬性知識點以及 CSS 的幕後原理。本文則是對於 CSS 的渲染過程、級聯規則、Visual Formatting Model、展示類型、位置布局等等。( https://madebymike.com.au/wri... )
  • 《CSS-in-JavaScript：基於組件的樣式組織》：通過使用內聯樣式，我們能夠利用 JavaScript 帶來的可編程性的便利來組織樣式代碼。它能夠為我們提供類似於 CSS 預處理器、命名空間等多方面的輔助。本文則是介紹了幾個常見的適用於 CSS-in-JS 技術的場景，譬如排版、空格等。( parg.co/bNe )
  • 《CSS Grid 布局初體驗》：最近 CSS Grid 布局大紅大紫，吸引了很多開發者的目光。而最新版的 Firefox、Chrome、Opera、Safari 都添加了對於 CSS Grid 的支持。本文則是聚焦於何謂 CSS Grid 布局、它可以做些什麼以及如何投放到生產環境等內容。( parg.co/bNW )
  • 《在 Web 開發中謹慎使用 CSS in JavaScript》：CSS 是有缺陷的，不過很多項目在選擇使用 CSS-in-JavaScript 來組織樣式的時候，卻是對於 CSS 與 CSS-in-JS 很多的誤解。本文以 Styled-Component 為例，列舉出了常見的 9 個誤解，譬如使用 CSS-in-JS 才能解決命名空間衝突、保證樣式的可擴展性、帶來了性能提升與樣式文件的可組織性等等。( parg.co/bNR)
  • 《sakura》：Sakura 是輕量級的 CSS 預置樣式庫，我們只需要簡單地引入 Sakura 樣式文件到網頁中就能將樸素的網頁轉化為較為美觀的、可讀性較好的頁面。( https://github.com/oxalorg/sa... )
  • 《在案例分析中學習 CSS Animation 與 Web Animation API》：本文由作者實現的某個 Logo 動畫入手，首先介紹了如何利用 Web Animations API 創建簡單的 KeyFrame 動畫，包括創建動畫對象以及將其應用到具體的元素中；接下來作者介紹了該動畫的 CSS 實現版本，還對比分析了二者在性能上的差異。( parg.co/btn )
  • 《高性能動態 CSS 樣式》：本文是對 JSS 新近提供的函數式值的介紹，其與 React 內聯樣式以及其他 CSS 解決方案相比有數倍的性能提升。在 Web 開發中動態設置樣式往往會觸發頁面的重渲染，而本文則是介紹了如何使用 CSSOM 的 API 來在元素渲染之前即完成樣式的設置。( parg.co/btW )
  • 《Web 前端開發的未來》：本文作者從自己的實踐出發暢想了未來 Web 前端開發的可能方向；主要包括 JavaScript 新特性的增強以及對於狀態管理的深入、從簡單界面逐漸過渡到完整系統、原生與 Web 之間的邊界逐步消失、CSS 會逐步模塊化並且預處理器會逐步退出歷史舞台、性能仍然是關鍵瓶頸以及 URL 會變得愈發重要等多個方面。( parg.co/bJr )
  • 《統一樣式語言》：近幾年 CSS-in-JS 迅猛發展，各種實現庫也是層出不窮。而本文作者，也是 CSS Modules 的作者之一，則是高屋建瓴地介紹了CSS-in-JS 的特點與解決的問題，梳理了人們之前對於 CSS-in-JS 存在的誤解。並且橫向比較了多個 CSS-in-JS 的優缺點與適用場景，最後還暢想了下 CSS-in-JS 的未來。( parg.co/bJi )
  • 《面向 Web 設計師與開發者的免費電子書合集》：本文介紹了十數本優秀的面向 Web 設計師與開發者的免費的電子書，涵蓋了 CSS&HTML 基礎、現代 JavaScript 開發、Git、PHP 等多個領域。( parg.co/bis )
  • 《寫給 CSS 的情書》：世人詬病 CSS 久矣，而本文作者則對於 CSS 一見鍾情且矢志不渝。本文是一篇不錯的了解不同端開發中樣式設置方式的文章，作者介紹了從 Java Applets 開始到 Android、iOS 應用開發中界面樣式與主題設置的方式與技術，論證了 CSS 相較於這些方式具有更好的靈活性與便捷性。( parg.co/biC )
  • 《CSS 局部作用域變數詳解》：CSS 自定義屬性或者所謂的 CSS 變數，為我們帶來了真正的、不同於 SASS 等預處理框架中使用的類佔位符的動態變數。本文介紹了 CSS 變數的基本定義語法與使用，以及如何使用 JavaScript 來動態修改 CSS 變數值從而動態地進行界面重渲染，最後闡述了目前瀏覽器對於 CSS 變數的支持情況以及可以使用的兼容方式。( parg.co/bLS)
  • 《面向生產環境的前端性能優化清單》：在 Web 前端開發中，產品經理更多的會關注於尋找優秀的設計與內容，而開發者同樣需要關注於如何進行前端性能優化。作者在本文中則分享了多年經驗累積的性能優化清單，包括常見的資源優化、CSS 優化中常用的工具、常用的性能檢測工具等等。( parg.co/bLP )
  • 《不會做動畫的前端不是好開發》：自從有了前端開發這個概念以來，這個崗位所做的事情都是圍繞著人機交互來開展的，主要包括展示信息給用戶看，然後獲取用戶的意圖並做出響應。隨著終端設備以及業務的快速發展，前端工程也越來越複雜，所以分工也進一步精細化，有側重做工具化與模塊化架構的，有側重無線體驗或者 Web 與 Native 融合方面的，也有側重複雜的商家後台或者數據可視化的，甚至有部分公司把 HTML+CSS 與 JS 的工作也分開的，所以出現了不同前端工程師會有不一樣的側重點。而目前越來越多的業務線有越來越高的動畫類需求，而在動畫方面能緊跟技術趨勢的優秀前端實在是比較難找，本文則希望讓那些想在動畫方面有些提升的朋友有所幫助。( parg.co/bL0 )
  • 《CSS 的現狀》：毫無疑問我們正在見證著 JavaScript 社區與生態的極速變化，而與此同時可能很多人沒有關注到 CSS 社區的進展，本文作者則是對於 CSS 的現狀進行了綜述並且提出了個人的觀點。本文作者主要提出了五個論點：我們可以使用 CSS Module 來替代原有的 BEM 等命名方案、使用 Flexbox 來替代 float、使用 CSS Grid 來替代第三方網格庫、使用 CSS 內置的變數、計算函數等特性來替代 SASS 等預處理庫，乃至於最終我們完全可以使用 CSS-in-JS 來替代 CSS。本文具有極強的主觀色彩，請批判性閱讀。( parg.co/bLZ )
  • 《現代 Web 開發魔法書》：本書是對現代 JavaScript Web 開發中涉及知識的分類與介紹，來源於作者日常工作中發送給全棧 Web 團隊新人的資源；目前已經納入了超過兩千的涵蓋了項目、工具、插件、服務、文章、數據、站點等多方面的鏈接。本書包含了 Web 平台概述、HTML5，CSS，JS 特性介紹、常用的 GUI 框架與架構介紹、應用開發流程中使用的工具介紹等等欄目。( parg.co/bv9 )
  • 構建生產環境下的 CSS Grid 布局：CSS Grid 為我們帶來了真正的網格布局解決方案，會為現有的 Web 布局方式注入新的活力。本文則介紹了 CSS Grid 的基礎概念和它帶來的機會與挑戰，應該如何在實踐中利用 CSS Grid 進行應用布局；作者還以 WordPress 主題為例，介紹了真實應用開發中存在的問題、對比了老的解決方法與基於 CSS Grid 的布局方式。本文首先介紹了 CSS Grid 的基礎語法與設計模式，然後討論了在生產環境中應該如何一步步地引入 CSS Grid，包括如何從草稿設計開始進行語義化布局以及對於瀏覽器兼容性的保證等。( parg.co/byc )
  • 你可能並不知道的 16 個 SCSS 特性點擊預覽：作者自 2009 年以來一直使用 SCSS/SASS 來進行大部分的樣式工作，而本文即是對於某些有用但是並不一定為人所知的 SCSS 特性進行介紹。本文介紹的特性包括了父選擇器的靈活用法、控制流指令、默認函數參數、擴展操作符等等；更多 CSS/SCSS 相關資料參考 https://parg.co/baH 。
  • 大幅度減少 CSS 包體大小：本文作者介紹了自己在構建某個在線售票的網站過程中，如何利用樣式類名分割與作用域隔離來大幅度減少 CSS 打包文件體積的實踐技巧。作者主要使用 CSS Modules，然後自定義了其樣式類名生成規則來保證生成較短的樣式類名並且使用作用域隔離來保證樣式隔離。
  • 漸進式 CSS 布局：從 Floats 到 Flexbox 到 Grid：隨著各大現代瀏覽器逐步支持 CSS Grid 布局，越來越多的開發者在嘗試使用這種新型的布局方式。不過鑒於目前還存在著大量的老版本瀏覽器，作者在本文中重點討論了如何利用漸進式 CSS 布局增強的方式來應對不同瀏覽器環境下的布局解決方案，並且根據運行環境來漸進增強；更多 CSS/SCSS 相關資料參考https://parg.co/baH 。
  • 突破 CSS 前端面試：不同於傳統的軟體工程師面試比較注重演算法，前端面試可能更多的注重綜合能力以及領域語言的掌握；本文即著眼於對於面試中常見的 CSS 問題的總結與介紹。本文列舉的問題譬如 Resetting 與 Normalizing 區別、floats 工作機制闡述、z-index 與 stacking context 比較、BFC 描述等等；更多 CSS/SCSS 相關資料參考 https://parg.co/baH 。
  • 基於 Shadow DOM 的樣式封裝：Shadow DOM 是 Web Components 標準的重要組成部分，它能夠將 DOM 樹進行隔離封裝，而本文則是介紹如何利用 Shadow DOM 實現對於樣式類的隔離封裝。由於 CSS 並沒有提供內置的模塊化或者作用域機制，而在大型項目中不同組件間的樣式又極易引發衝突，因此我們需要選擇合適的 CSS 樣式隔離方案。目前常用的隔離方案有 BEM 命名策略、IFrame、CSS Modules、CSS-in-JS 等，本文首先盤點了這些方案的優勢與不足；然後介紹了 Shadow DOM 的基本原理以及如何應用到樣式封裝上。更多 CSS/SCSS 相關資料參考這裡。
  • Chrome DevTools 進階指南：Chrome DevTools 是非常強大的開發工具，而本文則是以數十張動圖的方式細緻生動地介紹了如何使用 Chrome DevTools 進行常見的開發調試。本文涉及的內容包括了如何進行 CSS 覆蓋率分析、如何進行 CPU 使用率分析、如何不使用擴展而進行瀏覽器截屏、如何進行 Profiling、如何進行時間軸回溯等內容；更多 Web 調試相關資料參考這裡
  • 探索 ReactJS 中的 CSS 架構：本文著眼於討論 React 開發中常用的 CSS 架構，從 BEM 命名開始談起，介紹其對於 CSS 模塊分割的意義以及實際場景下增強型的 BEM 用法；然後介紹了 React 中 BEM 的實踐。接下來本文討論了 CSS Modules，如何配置與使用 CSS Modules，以及如何進行組件分層的解決方案。該結構背後的理念是通過以一種可伸縮的方式保持 CSS 架構創建更好的 ReactJS 項目，可以支持成千上萬的組件和開發人員協同工作；然而本文的真正關鍵點在於打開你的思維，去適應新事物。更多 React 相關資料參考這裡。

開源項目

  • 《基於 div 與 純 CSS 實現的載入動畫》：Web 開發中，當我們需要用戶等待某個非同步操作完成，譬如網路請求或者表單提交時，我們應當給予用戶友好的提示。而 CSS Loader 就是僅基於 div 與 CSS3 動畫的載入提示庫，其並不像 GIF 這樣需要額外的圖片請求，並且具有相當好的可維護性與自定義性。
  • 《Gutenberg》：網頁列印時的格式錯亂一直是個頭痛的問題，而 Gutenberg,css 提供了一系列基本的僅在列印時才會載入的樣式，優化專用於列印的格式顯示。( https://github.com/BafS/Guten... )
  • 《UnCSS》：UnCSS 能夠幫助你從樣式表中移除 HTML 中未被用到的樣式，它支持多文件以及 JavaScript 樣式定義，並且提供了介面、命令行、構建插件、POSTCSS 插件等多種使用方式。( github.com/giakki/uncss )
  • 《glamorous》：來自 PayPal 的 React 組件的 CSS-in-JS 解決方案，其支持 JSX 語法、自定義樣式組件等多種靈活的功能。( parg.co/b4Q )
  • 《iotaCSS》：iotaCSS 是基於 SASS 的 OOCSS 框架，其具備了完全輕量可擴展的特性，並且提供了高性能的、可讀性較好的以及完全響應式的介面配置。( iotacss.com/ )
  • Pell：Pell 是僅有 1KB 的所謂所見即所得的富文本編輯器，其不需要依賴於 jQuery、BootStrap 等第三方庫。Pell 主要以 ES6 語法開發，並且支持自定義的 SCSS 文件或者複寫 CSS 樣式來自定義風格，也是非常不錯的值得借鑒的編輯器開發示例。

推薦閱讀：

※css sprites精靈圖、css圖片整合、css貼圖定位案例教程

TAG:Web开发 | CSS |