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

前端每週清單專一前端領域內容，以對外文資料的蒐集爲主，幫助開發者瞭解一週前端熱點；分爲新聞熱點、開發教程、工程實踐、深度閱讀、開源項目、巔峯人生等欄目。歡迎關注【前端之巔】微信公衆號（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 壓縮策略會更爲優秀。( https://luisant.ca/remynifier )

• 《Animista》：Animista 是開箱即用的 CSS 動畫庫，其做者還發布了很是易用的在線預覽與選擇站點，適合於設計人員選擇合適的動畫效果。( http://animista.net/ )

• 《CSS Grid 典型案例》：該網站提供了一系列基於 React 編寫的 CSS Grid 佈局的測試樣例，是個不錯的從實例中學習 CSS Grid 語法與使用的教程。( https://sii.im/playground/css... )

• 《8 個可能你沒考慮過關於 CSS 的知識》：不一樣的技術學習曲線可能相差甚遠，而 CSS 的初學者則會以爲至關容易入手，可是深刻以後可能發現連居中都不甚容易。本文做者是個深度 CSS 熱愛者，他從本身多年的經驗介紹了 CSS 中的垂直居中、100% 屬性、float、z-index 等等多個細節知識點。（ https://parg.co/bhl ）

• 《實例講解 CSS 盒模型》：有經驗的前端開發者都知道 HTML 中的佈局就是盒套盒，而本文則是以某個街區的例子深刻淺出地講解 CSS 中的盒模型。（ https://parg.co/bhN ）

• 《構建高性能擴展與摺疊動畫》：本文以菜單伸縮動畫爲例，介紹如何構建高性能擴展與摺疊動畫。較簡單可是性能有缺陷的方式譬如修改元素寬高或者使用 clip 變換屬性；而本文主要是由 CSS3 的 scale 變換來實現菜單的擴展與摺疊，其爲了保證菜單按鈕的視覺效果與總體的平滑縮放還使用了所謂的對衝縮放技巧。( https://parg.co/bCz )

• 《使用 CSS Grid 打造私家花園》：本網站是個很是不錯的互動式學習 CSS Grid 的站點，其以 28 個互動的花園小遊戲來帶你一步一步學習 CSS Grid 的語法與實踐。( http://cssgridgarden.com/ )

• 《隱藏幕後的 CSS 知識點》：在咱們平常的開發中，每每關注於讓界面看上去符合預期，而每每不會去關注那些隱藏的屬性知識點以及 CSS 的幕後原理。本文則是對於 CSS 的渲染過程、級聯規則、Visual Formatting Model、展現類型、位置佈局等等。( https://madebymike.com.au/wri... )

• 《CSS-in-JavaScript：基於組件的樣式組織》：經過使用內聯樣式，咱們可以利用 JavaScript 帶來的可編程性的便利來組織樣式代碼。它可以爲咱們提供相似於 CSS 預處理器、命名空間等多方面的輔助。本文則是介紹了幾個常見的適用於 CSS-in-JS 技術的場景，譬如排版、空格等。( https://parg.co/bNe )

• 《CSS Grid 佈局初體驗》：最近 CSS Grid 佈局大紅大紫，吸引了不少開發者的目光。而最新版的 Firefox、Chrome、Opera、Safari 都添加了對於 CSS Grid 的支持。本文則是聚焦於何謂 CSS Grid 佈局、它能夠作些什麼以及如何投放到生產環境等內容。( https://parg.co/bNW )

• 《在 Web 開發中謹慎使用 CSS in JavaScript》：CSS 是有缺陷的，不過不少項目在選擇使用 CSS-in-JavaScript 來組織樣式的時候，倒是對於 CSS 與 CSS-in-JS 不少的誤解。本文以 Styled-Component 爲例，列舉出了常見的 9 個誤解，譬如使用 CSS-in-JS 才能解決命名空間衝突、保證樣式的可擴展性、帶來了性能提高與樣式文件的可組織性等等。( https://parg.co/bNR )

• 《sakura》：Sakura 是輕量級的 CSS 預置樣式庫，咱們只須要簡單地引入 Sakura 樣式文件到網頁中就能將樸素的網頁轉化爲較爲美觀的、可讀性較好的頁面。( https://github.com/oxalorg/sa... )

• 《在案例分析中學習 CSS Animation 與 Web Animation API》：本文由做者實現的某個 Logo 動畫入手，首先介紹瞭如何利用 Web Animations API 建立簡單的 KeyFrame 動畫，包括建立動畫對象以及將其應用到具體的元素中；接下來做者介紹了該動畫的 CSS 實現版本，還對比分析了兩者在性能上的差別。( https://parg.co/btn )

• 《高性能動態 CSS 樣式》：本文是對 JSS 新近提供的函數式值的介紹，其與 React 內聯樣式以及其餘 CSS 解決方案相比有數倍的性能提高。在 Web 開發中動態設置樣式每每會觸發頁面的重渲染，而本文則是介紹瞭如何使用 CSSOM 的 API 來在元素渲染以前即完成樣式的設置。( https://parg.co/btW )

• 《Web 前端開發的將來》：本文做者從本身的實踐出發暢想了將來 Web 前端開發的可能方向；主要包括 JavaScript 新特性的加強以及對於狀態管理的深刻、從簡單界面逐漸過渡到完整系統、原生與 Web 之間的邊界逐步消失、CSS 會逐步模塊化而且預處理器會逐步退出歷史舞臺、性能仍然是關鍵瓶頸以及 URL 會變得愈發重要等多個方面。( https://parg.co/bJr )

• 《統同樣式語言》：近幾年 CSS-in-JS 迅猛發展，各類實現庫也是層出不窮。而本文做者，也是 CSS Modules 的做者之一，則是高屋建瓴地介紹了CSS-in-JS 的特色與解決的問題，梳理了人們以前對於 CSS-in-JS 存在的誤解。而且橫向比較了多個 CSS-in-JS 的優缺點與適用場景，最後還暢想了下 CSS-in-JS 的將來。( https://parg.co/bJi )

• 《面向 Web 設計師與開發者的免費電子書合集》：本文介紹了十數本優秀的面向 Web 設計師與開發者的免費的電子書，涵蓋了 CSS&HTML 基礎、現代 JavaScript 開發、Git、PHP 等多個領域。( https://parg.co/bis )

• 《寫給 CSS 的情書》：世人詬病 CSS 久矣，而本文做者則對於 CSS 一見傾心且矢志不渝。本文是一篇不錯的瞭解不一樣端開發中樣式設置方式的文章，做者介紹了從 Java Applets 開始到 Android、iOS 應用開發中界面樣式與主題設置的方式與技術，論證了 CSS 相較於這些方式具備更好的靈活性與便捷性。( https://parg.co/biC )

• 《CSS 局部做用域變量詳解》：CSS 自定義屬性或者所謂的 CSS 變量，爲咱們帶來了真正的、不一樣於 SASS 等預處理框架中使用的類佔位符的動態變量。本文介紹了 CSS 變量的基本定義語法與使用，以及如何使用 JavaScript 來動態修改 CSS 變量值從而動態地進行界面重渲染，最後闡述了目前瀏覽器對於 CSS 變量的支持狀況以及可使用的兼容方式。( https://parg.co/bLS )

• 《面向生產環境的前端性能優化清單》：在 Web 前端開發中，產品經理更多的會關注於尋找優秀的設計與內容，而開發者一樣須要關注於如何進行前端性能優化。做者在本文中則分享了多年經驗累積的性能優化清單，包括常見的資源優化、CSS 優化中經常使用的工具、經常使用的性能檢測工具等等。( https://parg.co/bLP )

• 《不會作動畫的前端不是好開發》：自從有了前端開發這個概念以來，這個崗位所作的事情都是圍繞着人機交互來開展的，主要包括展現信息給用戶看，而後獲取用戶的意圖並作出響應。隨着終端設備以及業務的快速發展，前端工程也愈來愈複雜，因此分工也進一步精細化，有側重作工具化與模塊化架構的，有側重無線體驗或者 Web 與 Native 融合方面的，也有側重複雜的商家後臺或者數據可視化的，甚至有部分公司把 HTML+CSS 與 JS 的工做也分開的，因此出現了不一樣前端工程師會有不同的側重點。而目前愈來愈多的業務線有愈來愈高的動畫類需求，而在動畫方面能緊跟技術趨勢的優秀前端實在是比較難找，本文則但願讓那些想在動畫方面有些提高的朋友有所幫助。( https://parg.co/bL0 )

• 《CSS 的現狀》：毫無疑問咱們正在見證着 JavaScript 社區與生態的極速變化，而與此同時可能不少人沒有關注到 CSS 社區的進展，本文做者則是對於 CSS 的現狀進行了綜述而且提出了我的的觀點。本文做者主要提出了五個論點：咱們可使用 CSS Module 來替代原有的 BEM 等命名方案、使用 Flexbox 來替代 float、使用 CSS Grid 來替代第三方網格庫、使用 CSS 內置的變量、計算函數等特性來替代 SASS 等預處理庫，乃至於最終咱們徹底可使用 CSS-in-JS 來替代 CSS。本文具備極強的主觀色彩，請批判性閱讀。( https://parg.co/bLZ )

• 《現代 Web 開發魔法書》：本書是對現代 JavaScript Web 開發中涉及知識的分類與介紹，來源於做者平常工做中發送給全棧 Web 團隊新人的資源；目前已經歸入了超過兩千的涵蓋了項目、工具、插件、服務、文章、數據、站點等多方面的連接。本書包含了 Web 平臺概述、HTML5，CSS，JS 特性介紹、經常使用的 GUI 框架與架構介紹、應用開發流程中使用的工具介紹等等欄目。( https://parg.co/bv9 )

• 構建生產環境下的 CSS Grid 佈局：CSS Grid 爲咱們帶來了真正的網格佈局解決方案，會爲現有的 Web 佈局方式注入新的活力。本文則介紹了 CSS Grid 的基礎概念和它帶來的機會與挑戰，應該如何在實踐中利用 CSS Grid 進行應用佈局；做者還以 WordPress 主題爲例，介紹了真實應用開發中存在的問題、對比了老的解決方法與基於 CSS Grid 的佈局方式。本文首先介紹了 CSS Grid 的基礎語法與設計模式，而後討論了在生產環境中應該如何一步步地引入 CSS Grid，包括如何從草稿設計開始進行語義化佈局以及對於瀏覽器兼容性的保證等。( https://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 插件等多種使用方式。( https://github.com/giakki/uncss )

• 《glamorous》：來自 PayPal 的 React 組件的 CSS-in-JS 解決方案，其支持 JSX 語法、自定義樣式組件等多種靈活的功能。( https://parg.co/b4Q )

• 《iotaCSS》：iotaCSS 是基於 SASS 的 OOCSS 框架，其具有了徹底輕量可擴展的特性，而且提供了高性能的、可讀性較好的以及徹底響應式的接口配置。( https://www.iotacss.com/ )

• Pell：Pell 是僅有 1KB 的所謂所見即所得的富文本編輯器，其不須要依賴於 jQuery、BootStrap 等第三方庫。Pell 主要以 ES6 語法開發，而且支持自定義的 SCSS 文件或者複寫 CSS 樣式來自定義風格，也是很是不錯的值得借鑑的編輯器開發示例。