摘要：前端每周清單專注前端領(lǐng)域內(nèi)容，以對外文資料的搜集為主，幫助開發(fā)者了解一周前端熱點(diǎn)分為新聞熱點(diǎn)開發(fā)教程工程實(shí)踐深度閱讀開源項(xiàng)目巔峰人生等欄目。它能夠?yàn)槲覀兲峁╊愃朴陬A(yù)處理器命名空間等多方面的輔助。

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

《2017 前端開發(fā)手冊》：Front-End Developer Handbook 2017 由 Cody Lindley 編寫，面向每一個(gè)希望學(xué)習(xí)前端的開發(fā)者。該手冊概括地討論了前端工程化的相關(guān)實(shí)踐：在 2017 年中我們應(yīng)該使用哪些前端工具以及如何學(xué)習(xí)去使用這些數(shù)據(jù)。該手冊的內(nèi)容包含了 Web 技術(shù)的基礎(chǔ)：HTML、CSS、DOM 以及 JavaScript，以及基于這些技術(shù)構(gòu)建的優(yōu)秀開源項(xiàng)目。

《Web APP 實(shí)現(xiàn)水平滑頁翻頁交互效果的要點(diǎn)解析》：本文是張鑫旭老師分享的起點(diǎn)中文網(wǎng)支持水平滑頁閱讀效果的實(shí)踐，其核心是利用 CSS3 column 分欄布局。CSS3 column多欄布局是支持比較早的CSS3布局方式，目前IE10+以及其他所有現(xiàn)代瀏覽器都支持，IE瀏覽器不需要私有前綴，F(xiàn)ireFox和Chrome雖然現(xiàn)在也不需要，但是，考慮到移動端以及可能一些用戶瀏覽器升級不及時(shí)的現(xiàn)狀，因此，-webkit-以及-moz-前綴目前還不能省略。

《掌握 CSS Animation》: 利用 Keyframes 以及各種各樣的動畫屬性：timing、delay、play state、animation-count、iteration count、direction、fill mode、will change 來構(gòu)建交互動畫。

《CSS Grid 指南》: 網(wǎng)格系統(tǒng)是布局設(shè)計(jì)的核心之一，在 Web 開發(fā)中我們經(jīng)常需要借助第三方庫來創(chuàng)建合適的網(wǎng)格系統(tǒng)。而 CSS Grid 則是一個(gè)二維布局系統(tǒng)，能夠輔助開發(fā)者創(chuàng)建基于網(wǎng)格的用戶界面，此文則是詳細(xì)地介紹 CSS Grid 的語法細(xì)節(jié)以及調(diào)試實(shí)例。( https://tympanus.net/codrops/... )

《Flexbox 語法清單》：該網(wǎng)頁提供了交互式的 CSS Flexbox 教程，詳細(xì)介紹了 Flexbox 的使用語法與經(jīng)典案例。( http://yoksel.github.io/flex-... )

《另一種 CSS 壓縮思路》：本文作者提出了一種新的 CSS 壓縮思路，有可能會損壞原有的 CSS 文件，不過其壓縮比率相較于現(xiàn)有的通用 CSS 壓縮策略會更為優(yōu)秀。( https://luisant.ca/remynifier )

《Animista》：Animista 是開箱即用的 CSS 動畫庫，其作者還發(fā)布了非常易用的在線預(yù)覽與選擇站點(diǎn)，適合于設(shè)計(jì)人員選擇合適的動畫效果。( http://animista.net/ )

《CSS Grid 典型案例》：該網(wǎng)站提供了一系列基于 React 編寫的 CSS Grid 布局的測試樣例，是個(gè)不錯(cuò)的從實(shí)例中學(xué)習(xí) CSS Grid 語法與使用的教程。( https://sii.im/playground/css... )

《8 個(gè)可能你沒考慮過關(guān)于 CSS 的知識》：不同的技術(shù)學(xué)習(xí)曲線可能相差甚遠(yuǎn)，而 CSS 的初學(xué)者則會覺得相當(dāng)容易入手，但是深入之后可能發(fā)現(xiàn)連居中都不甚容易。本文作者是個(gè)深度 CSS 熱愛者，他從自己多年的經(jīng)驗(yàn)介紹了 CSS 中的垂直居中、100% 屬性、float、z-index 等等多個(gè)細(xì)節(jié)知識點(diǎn)。（ https://parg.co/bhl ）

《實(shí)例講解 CSS 盒模型》：有經(jīng)驗(yàn)的前端開發(fā)者都知道 HTML 中的布局就是盒套盒，而本文則是以某個(gè)街區(qū)的例子深入淺出地講解 CSS 中的盒模型。（ https://parg.co/bhN ）

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

《使用 CSS Grid 打造私家花園》：本網(wǎng)站是個(gè)非常不錯(cuò)的互動式學(xué)習(xí) CSS Grid 的站點(diǎn)，其以 28 個(gè)互動的花園小游戲來帶你一步一步學(xué)習(xí) CSS Grid 的語法與實(shí)踐。( http://cssgridgarden.com/ )

《隱藏幕后的 CSS 知識點(diǎn)》：在我們?nèi)粘５拈_發(fā)中，往往關(guān)注于讓界面看上去符合預(yù)期，而往往不會去關(guān)注那些隱藏的屬性知識點(diǎn)以及 CSS 的幕后原理。本文則是對于 CSS 的渲染過程、級聯(lián)規(guī)則、Visual Formatting Model、展示類型、位置布局等等。( https://madebymike.com.au/wri... )

《CSS-in-JavaScript：基于組件的樣式組織》：通過使用內(nèi)聯(lián)樣式，我們能夠利用 JavaScript 帶來的可編程性的便利來組織樣式代碼。它能夠?yàn)槲覀兲峁╊愃朴?CSS 預(yù)處理器、命名空間等多方面的輔助。本文則是介紹了幾個(gè)常見的適用于 CSS-in-JS 技術(shù)的場景，譬如排版、空格等。( https://parg.co/bNe )

《CSS Grid 布局初體驗(yàn)》：最近 CSS Grid 布局大紅大紫，吸引了很多開發(fā)者的目光。而最新版的 Firefox、Chrome、Opera、Safari 都添加了對于 CSS Grid 的支持。本文則是聚焦于何謂 CSS Grid 布局、它可以做些什么以及如何投放到生產(chǎn)環(huán)境等內(nèi)容。( https://parg.co/bNW )

《在 Web 開發(fā)中謹(jǐn)慎使用 CSS in JavaScript》：CSS 是有缺陷的，不過很多項(xiàng)目在選擇使用 CSS-in-JavaScript 來組織樣式的時(shí)候，卻是對于 CSS 與 CSS-in-JS 很多的誤解。本文以 Styled-Component 為例，列舉出了常見的 9 個(gè)誤解，譬如使用 CSS-in-JS 才能解決命名空間沖突、保證樣式的可擴(kuò)展性、帶來了性能提升與樣式文件的可組織性等等。( https://parg.co/bNR )

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

《在案例分析中學(xué)習(xí) CSS Animation 與 Web Animation API》：本文由作者實(shí)現(xiàn)的某個(gè) Logo 動畫入手，首先介紹了如何利用 Web Animations API 創(chuàng)建簡單的 KeyFrame 動畫，包括創(chuàng)建動畫對象以及將其應(yīng)用到具體的元素中；接下來作者介紹了該動畫的 CSS 實(shí)現(xiàn)版本，還對比分析了二者在性能上的差異。( https://parg.co/btn )

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

《Web 前端開發(fā)的未來》：本文作者從自己的實(shí)踐出發(fā)暢想了未來 Web 前端開發(fā)的可能方向；主要包括 JavaScript 新特性的增強(qiáng)以及對于狀態(tài)管理的深入、從簡單界面逐漸過渡到完整系統(tǒng)、原生與 Web 之間的邊界逐步消失、CSS 會逐步模塊化并且預(yù)處理器會逐步退出歷史舞臺、性能仍然是關(guān)鍵瓶頸以及 URL 會變得愈發(fā)重要等多個(gè)方面。( https://parg.co/bJr )

《統(tǒng)一樣式語言》：近幾年 CSS-in-JS 迅猛發(fā)展，各種實(shí)現(xiàn)庫也是層出不窮。而本文作者，也是 CSS Modules 的作者之一，則是高屋建瓴地介紹了CSS-in-JS 的特點(diǎn)與解決的問題，梳理了人們之前對于 CSS-in-JS 存在的誤解。并且橫向比較了多個(gè) CSS-in-JS 的優(yōu)缺點(diǎn)與適用場景，最后還暢想了下 CSS-in-JS 的未來。( https://parg.co/bJi )

《面向 Web 設(shè)計(jì)師與開發(fā)者的免費(fèi)電子書合集》：本文介紹了十?dāng)?shù)本優(yōu)秀的面向 Web 設(shè)計(jì)師與開發(fā)者的免費(fèi)的電子書，涵蓋了 CSS&HTML 基礎(chǔ)、現(xiàn)代 JavaScript 開發(fā)、Git、PHP 等多個(gè)領(lǐng)域。( https://parg.co/bis )

《寫給 CSS 的情書》：世人詬病 CSS 久矣，而本文作者則對于 CSS 一見鐘情且矢志不渝。本文是一篇不錯(cuò)的了解不同端開發(fā)中樣式設(shè)置方式的文章，作者介紹了從 Java Applets 開始到 Android、iOS 應(yīng)用開發(fā)中界面樣式與主題設(shè)置的方式與技術(shù)，論證了 CSS 相較于這些方式具有更好的靈活性與便捷性。( https://parg.co/biC )

《CSS 局部作用域變量詳解》：CSS 自定義屬性或者所謂的 CSS 變量，為我們帶來了真正的、不同于 SASS 等預(yù)處理框架中使用的類占位符的動態(tài)變量。本文介紹了 CSS 變量的基本定義語法與使用，以及如何使用 JavaScript 來動態(tài)修改 CSS 變量值從而動態(tài)地進(jìn)行界面重渲染，最后闡述了目前瀏覽器對于 CSS 變量的支持情況以及可以使用的兼容方式。( https://parg.co/bLS )

《面向生產(chǎn)環(huán)境的前端性能優(yōu)化清單》：在 Web 前端開發(fā)中，產(chǎn)品經(jīng)理更多的會關(guān)注于尋找優(yōu)秀的設(shè)計(jì)與內(nèi)容，而開發(fā)者同樣需要關(guān)注于如何進(jìn)行前端性能優(yōu)化。作者在本文中則分享了多年經(jīng)驗(yàn)累積的性能優(yōu)化清單，包括常見的資源優(yōu)化、CSS 優(yōu)化中常用的工具、常用的性能檢測工具等等。( https://parg.co/bLP )

《不會做動畫的前端不是好開發(fā)》：自從有了前端開發(fā)這個(gè)概念以來，這個(gè)崗位所做的事情都是圍繞著人機(jī)交互來開展的，主要包括展示信息給用戶看，然后獲取用戶的意圖并做出響應(yīng)。隨著終端設(shè)備以及業(yè)務(wù)的快速發(fā)展，前端工程也越來越復(fù)雜，所以分工也進(jìn)一步精細(xì)化，有側(cè)重做工具化與模塊化架構(gòu)的，有側(cè)重?zé)o線體驗(yàn)或者 Web 與 Native 融合方面的，也有側(cè)重復(fù)雜的商家后臺或者數(shù)據(jù)可視化的，甚至有部分公司把 HTML+CSS 與 JS 的工作也分開的，所以出現(xiàn)了不同前端工程師會有不一樣的側(cè)重點(diǎn)。而目前越來越多的業(yè)務(wù)線有越來越高的動畫類需求，而在動畫方面能緊跟技術(shù)趨勢的優(yōu)秀前端實(shí)在是比較難找，本文則希望讓那些想在動畫方面有些提升的朋友有所幫助。( https://parg.co/bL0 )

《CSS 的現(xiàn)狀》：毫無疑問我們正在見證著 JavaScript 社區(qū)與生態(tài)的極速變化，而與此同時(shí)可能很多人沒有關(guān)注到 CSS 社區(qū)的進(jìn)展，本文作者則是對于 CSS 的現(xiàn)狀進(jìn)行了綜述并且提出了個(gè)人的觀點(diǎn)。本文作者主要提出了五個(gè)論點(diǎn)：我們可以使用 CSS Module 來替代原有的 BEM 等命名方案、使用 Flexbox 來替代 float、使用 CSS Grid 來替代第三方網(wǎng)格庫、使用 CSS 內(nèi)置的變量、計(jì)算函數(shù)等特性來替代 SASS 等預(yù)處理庫，乃至于最終我們完全可以使用 CSS-in-JS 來替代 CSS。本文具有極強(qiáng)的主觀色彩，請批判性閱讀。( https://parg.co/bLZ )

《現(xiàn)代 Web 開發(fā)魔法書》：本書是對現(xiàn)代 JavaScript Web 開發(fā)中涉及知識的分類與介紹，來源于作者日常工作中發(fā)送給全棧 Web 團(tuán)隊(duì)新人的資源；目前已經(jīng)納入了超過兩千的涵蓋了項(xiàng)目、工具、插件、服務(wù)、文章、數(shù)據(jù)、站點(diǎn)等多方面的鏈接。本書包含了 Web 平臺概述、HTML5，CSS，JS 特性介紹、常用的 GUI 框架與架構(gòu)介紹、應(yīng)用開發(fā)流程中使用的工具介紹等等欄目。( https://parg.co/bv9 )

構(gòu)建生產(chǎn)環(huán)境下的 CSS Grid 布局：CSS Grid 為我們帶來了真正的網(wǎng)格布局解決方案，會為現(xiàn)有的 Web 布局方式注入新的活力。本文則介紹了 CSS Grid 的基礎(chǔ)概念和它帶來的機(jī)會與挑戰(zhàn)，應(yīng)該如何在實(shí)踐中利用 CSS Grid 進(jìn)行應(yīng)用布局；作者還以 WordPress 主題為例，介紹了真實(shí)應(yīng)用開發(fā)中存在的問題、對比了老的解決方法與基于 CSS Grid 的布局方式。本文首先介紹了 CSS Grid 的基礎(chǔ)語法與設(shè)計(jì)模式，然后討論了在生產(chǎn)環(huán)境中應(yīng)該如何一步步地引入 CSS Grid，包括如何從草稿設(shè)計(jì)開始進(jìn)行語義化布局以及對于瀏覽器兼容性的保證等。( https://parg.co/byc )

你可能并不知道的 16 個(gè) SCSS 特性：作者自 2009 年以來一直使用 SCSS/SASS 來進(jìn)行大部分的樣式工作，而本文即是對于某些有用但是并不一定為人所知的 SCSS 特性進(jìn)行介紹。本文介紹的特性包括了父選擇器的靈活用法、控制流指令、默認(rèn)函數(shù)參數(shù)、擴(kuò)展操作符等等；更多 CSS/SCSS 相關(guān)資料參考 https://parg.co/baH 。

大幅度減少 CSS 包體大小：本文作者介紹了自己在構(gòu)建某個(gè)在線售票的網(wǎng)站過程中，如何利用樣式類名分割與作用域隔離來大幅度減少 CSS 打包文件體積的實(shí)踐技巧。作者主要使用 CSS Modules，然后自定義了其樣式類名生成規(guī)則來保證生成較短的樣式類名并且使用作用域隔離來保證樣式隔離。

漸進(jìn)式 CSS 布局：從 Floats 到 Flexbox 到 Grid：隨著各大現(xiàn)代瀏覽器逐步支持 CSS Grid 布局，越來越多的開發(fā)者在嘗試使用這種新型的布局方式。不過鑒于目前還存在著大量的老版本瀏覽器，作者在本文中重點(diǎn)討論了如何利用漸進(jìn)式 CSS 布局增強(qiáng)的方式來應(yīng)對不同瀏覽器環(huán)境下的布局解決方案，并且根據(jù)運(yùn)行環(huán)境來漸進(jìn)增強(qiáng)；更多 CSS/SCSS 相關(guān)資料參考 https://parg.co/baH 。

突破 CSS 前端面試：不同于傳統(tǒng)的軟件工程師面試比較注重算法，前端面試可能更多的注重綜合能力以及領(lǐng)域語言的掌握；本文即著眼于對于面試中常見的 CSS 問題的總結(jié)與介紹。本文列舉的問題譬如 Resetting 與 Normalizing 區(qū)別、floats 工作機(jī)制闡述、z-index 與 stacking context 比較、BFC 描述等等；更多 CSS/SCSS 相關(guān)資料參考 https://parg.co/baH 。

基于 Shadow DOM 的樣式封裝：Shadow DOM 是 Web Components 標(biāo)準(zhǔn)的重要組成部分，它能夠?qū)?DOM 樹進(jìn)行隔離封裝，而本文則是介紹如何利用 Shadow DOM 實(shí)現(xiàn)對于樣式類的隔離封裝。由于 CSS 并沒有提供內(nèi)置的模塊化或者作用域機(jī)制，而在大型項(xiàng)目中不同組件間的樣式又極易引發(fā)沖突，因此我們需要選擇合適的 CSS 樣式隔離方案。目前常用的隔離方案有 BEM 命名策略、IFrame、CSS Modules、CSS-in-JS 等，本文首先盤點(diǎn)了這些方案的優(yōu)勢與不足；然后介紹了 Shadow DOM 的基本原理以及如何應(yīng)用到樣式封裝上。更多 CSS/SCSS 相關(guān)資料參考這里。

Chrome DevTools 進(jìn)階指南：Chrome DevTools 是非常強(qiáng)大的開發(fā)工具，而本文則是以數(shù)十張動圖的方式細(xì)致生動地介紹了如何使用 Chrome DevTools 進(jìn)行常見的開發(fā)調(diào)試。本文涉及的內(nèi)容包括了如何進(jìn)行 CSS 覆蓋率分析、如何進(jìn)行 CPU 使用率分析、如何不使用擴(kuò)展而進(jìn)行瀏覽器截屏、如何進(jìn)行 Profiling、如何進(jìn)行時(shí)間軸回溯等內(nèi)容；更多 Web 調(diào)試相關(guān)資料參考這里

探索 ReactJS 中的 CSS 架構(gòu)：本文著眼于討論 React 開發(fā)中常用的 CSS 架構(gòu)，從 BEM 命名開始談起，介紹其對于 CSS 模塊分割的意義以及實(shí)際場景下增強(qiáng)型的 BEM 用法；然后介紹了 React 中 BEM 的實(shí)踐。接下來本文討論了 CSS Modules，如何配置與使用 CSS Modules，以及如何進(jìn)行組件分層的解決方案。該結(jié)構(gòu)背后的理念是通過以一種可伸縮的方式保持 CSS 架構(gòu)創(chuàng)建更好的 ReactJS 項(xiàng)目，可以支持成千上萬的組件和開發(fā)人員協(xié)同工作；然而本文的真正關(guān)鍵點(diǎn)在于打開你的思維，去適應(yīng)新事物。更多 React 相關(guān)資料參考這里。

《基于 div 與 純 CSS 實(shí)現(xiàn)的加載動畫》：Web 開發(fā)中，當(dāng)我們需要用戶等待某個(gè)異步操作完成，譬如網(wǎng)路請求或者表單提交時(shí)，我們應(yīng)當(dāng)給予用戶友好的提示。而 CSS Loader 就是僅基于 div 與 CSS3 動畫的加載提示庫，其并不像 GIF 這樣需要額外的圖片請求，并且具有相當(dāng)好的可維護(hù)性與自定義性。

《Gutenberg》：網(wǎng)頁打印時(shí)的格式錯(cuò)亂一直是個(gè)頭痛的問題，而 Gutenberg,css 提供了一系列基本的僅在打印時(shí)才會加載的樣式，優(yōu)化專用于打印的格式顯示。( https://github.com/BafS/Guten... )

《UnCSS》：UnCSS 能夠幫助你從樣式表中移除 HTML 中未被用到的樣式，它支持多文件以及 JavaScript 樣式定義，并且提供了接口、命令行、構(gòu)建插件、POSTCSS 插件等多種使用方式。( https://github.com/giakki/uncss )

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

《iotaCSS》：iotaCSS 是基于 SASS 的 OOCSS 框架，其具備了完全輕量可擴(kuò)展的特性，并且提供了高性能的、可讀性較好的以及完全響應(yīng)式的接口配置。( https://www.iotacss.com/ )

Pell：Pell 是僅有 1KB 的所謂所見即所得的富文本編輯器，其不需要依賴于 jQuery、BootStrap 等第三方庫。Pell 主要以 ES6 語法開發(fā)，并且支持自定義的 SCSS 文件或者復(fù)寫 CSS 樣式來自定義風(fēng)格，也是非常不錯(cuò)的值得借鑒的編輯器開發(fā)示例。