前端周榜专注于前端领域的内容。读书、开源项目、巅峰人生等栏目。欢迎关注【前端置顶】微信公众号（ID：frontshow），及时获取前端周榜；本文是半年来发布的前端周榜中CSS相关教程实践和开源项目盘点。在此处查看过去的列表或其他库存文章。教程实践《2017 前端开发手册》：前端开发者手册2017作者：CodyLindley，面向每一位想学习前端的开发者。本手册总体上讨论了前端工程的相关实践：2017年我们应该使用哪些前端工具，以及如何学习使用这些资料。这本手册的内容涵盖了Web技术的基础知识：HTML、CSS、DOM和JavaScript，以及基于这些技术构建的优秀开源项目。《Web APP 实现水平滑页翻页交互效果的要点解析》：本文是起点中文网张新旭老师分享的支持横向滑动页面阅读效果的实践。核心是使用CSS3分栏布局。CSS3column多栏布局支持比较早的CSS3布局方式。目前IE10+和所有其他现代浏览器都支持它。IE浏览器不需要私有前缀。虽然FireFox和Chrome现在不需要，但是考虑到移动端和可能部分用户的浏览器没有及时升级，所以目前不能省略-webkit-和-moz-前缀。《掌握 CSS Animation》：使用关键帧和各种动画属性：时间、延迟、播放状态、动画计数、迭代计数、方向、填充模式，将更改以构建交互式动画。《CSS Grid 指南》:网格系统是布局设计的核心之一。在web开发中，我们经常需要使用第三方库来创建一个合适的网格系统。CSSGrid是一个二维布局系统，可以帮助开发人员创建基于网格的用户界面。本文详细介绍了CSSGrid的语法细节和调试实例。(https://tympanus.net/codrops/...)《Flexbox 语法清单》：本网页提供交互式CSSFlexbox教程，详细介绍了Flexbox的使用语法和经典案例。(http://yoksel.github.io/flex-...)《另一种 CSS 压缩思路》：本文作者提出了一种新的CSS压缩思路，可能会损坏原有的CSS文件，但其压缩率相比现有常见CSS缩小策略会更好。(https://luisant.ca/remynifier)《Animista》：Animista是一个开箱即用的CSS动画库，它的作者还发布了一个非常好用的在线预览和选择网站，适合供设计师选择合适的动画效果。(http://animista.net/)《CSS Grid 典型案例》：该网站提供了一系列基于React编写的CSSGrid布局的测试示例。这是从示例中学习CSSGrid语法和用法的好教程。(https://sii.im/playground/css...)《8 个可能你没考虑过关于 CSS 的知识》:不同技术的学习曲线可能差别很大，CSS初学者会觉得上手很容易，但深入之后，你可能发现即使居中也很困难。不容易。这篇文章的作者是一个深厚的CSS爱好者。他从多年的经验中，介绍了CSS中的垂直居中、100%属性、float、z-index等诸多细节知识点。(https://parg.co/bhl)《实例讲解 CSS 盒模型》：有经验的前端开发者都知道HTML中的布局是box-in-box，本文以block的例子来讲解CSS中的box模型以一种简单的方式。(https://parg.co/bhN)《构建高性能扩展与折叠动画》：本文以菜单展开和收缩动画为例，介绍如何构建高性能的展开和折叠动画。更简单但性能有缺陷的方法，例如修改元素的宽度和高度或使用剪辑转换属性；而本文主要是利用CSS3的缩放变换来实现菜单的展开和折叠。为了保证菜单按钮的视觉效果和整体的平滑缩放，使用了所谓的对冲缩放技巧。(https://parg.co/bCz)《使用 CSS Grid 打造私家花园》：这个网站是一个非常好的交互式学习CSSGrid的站点。它使用28个互动花园游戏带你一步步学习CSSGrid的语法和实践。(http://cssgridgarden.com/)《隐藏幕后的 CSS 知识点》：在我们日常的开发中，往往注重让界面看起来符合预期，而往往没有关注那些隐藏的属性知识点和背后的原理的CSS。这篇文章是关于CSS渲染过程、级联规则、VisualFormattingModel、显示类型、位置布局等（https://madebymike.com.au/wri...）《CSS-in-JavaScript：基于组件的样式组织》：通过使用内联样式，我们是能够利用JavaScript带来的可编程性的便利来组织样式代码。它可以在CSS预处理器和命名空间等很多方面为我们提供帮助。本文介绍几种适用于CSS-in-JS技术的常见场景，如排版、留白等。(https://parg.co/bNe)《CSS Grid 布局初体验》：CSSGrid布局最近很火，引起了关注许多开发商。Firefox、Chrome、Opera和Safari的最新版本都添加了对CSSGrid的支持。本文重点介绍什么是CSSGrid布局，它可以做什么，以及如何将其投入生产环境。(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预设样式库。我们只需要简单的在网页中引入樱花风格的文件，就可以让平淡无奇的网页变得更加美观。,可读页面。(https://github.com/oxalorg/sa...)《在案例分析中学习 CSS Animation 与 Web Animation API》：本文以作者实现的一个Logo动画开头。它首先介绍了如何使用WebAnimationsAPI来创建一个简单的KeyFrame动画，包括创建动画对象并将其应用于特定元素；接着笔者介绍了动画的CSS实现版本，也对比分析了两者在性能上的差异。(https://parg.co/btn)《高性能动态 CSS 样式》：本文是对JSS提供的新函数值的介绍，与React内联样式和其他CSS解决方案相比有多项性能提升。Web开发中动态设置样式经常会触发页面重新渲染，本文介绍如何使用CSSOMAPI在元素渲染前完成样式设置。(https://parg.co/btW)《Web 前端开发的未来》：本文作者从自己的实践中畅想未来Web前端发展可能的方向；主要包括JavaScript新特性的增强和深入的状态管理，从一个简单的界面逐步开始。过渡到全系统，native和web的界限在逐渐消失，CSS会逐渐模块化，预处理器会逐渐消失，性能仍然是关键瓶颈，URL会越来越重要。(https://parg.co/bJr)《统一样式语言》：CSS-in-JS这几年发展很快，各种实现库层出不穷。这篇文章的作者，也是CSSModules的作者之一，从高层次上介绍了CSS-in-JS的特点和存在的问题，梳理了大家以往对CSS-in-JS的误解。并横向比较了多种CSS-in-JS的优缺点和适用场景，最后畅想了CSS-in-JS的未来。(https://parg.co/bJi)《面向 Web 设计师与开发者的免费电子书合集》：本文为网页设计师和开发者介绍了十多本优秀的免费电子书，涵盖CSS&HTML基础、现代JavaScript开发、Git、PHP等领域。(https://parg.co/bis)《写给 CSS 的情书》：世人对CSS的诟病由来已久，而本文作者却对CSS一见倾心，志在必得。这篇文章是了解不同终端开发中样式设置方法的好文章。作者介绍了JavaApplets开发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的现状进行了回顾，并提出了个人的观点。本文作者主要提出五个论点：我们可以用CSSModule代替原来的BEM等命名方案，用Flexbox代替float，用CSSGrid代替第三方网格库，用CSS内置变量，计算函数等特性来替代SASS等预处理库，最终我们可以用CSS-in-JS来替代CSS。这篇文章主观性很强，请批判性地阅读。(https://parg.co/bLZ)《现代 Web 开发魔法书》：本书是对现代JavaScriptWeb开发所涉及知识的分类介绍，来自作者发给全栈Web团队新人的资源在他的日常工作中；它已被收录在2000多个链接中，涵盖项目、工具、插件、服务、文章、数据、站点等。本书包括Web平台概述，HTML5、CSS和JS特性介绍，常用GUI框架和架构介绍，以及应用程序开发过程中使用的工具介绍。(https://parg.co/bv9)在生产环境中构建CSSGrid布局：CSSGrid为我们带来了真正的网格布局解决方案，将为现有的网页布局方式注入新的活力。本文介绍了CSSGrid的基本概念及其带来的机遇和挑战，以及如何在实践中使用CSSGrid进行应用布局；作者还以WordPress主题为例，介绍了实际应用开发中存在的问题，并对比了老方案和基于CSSGrid的布局。本文首先介绍了CSSGrid的基本语法和设计模式，然后讨论了如何在生产环境中逐步引入CSSGrid，包括如何从草稿设计入手进行语义布局和保证浏览器兼容性。(https://parg.co/byc)16SCSSFeaturesYouMayNotKnow：作者自2009年以来的大部分样式工作都在使用SCSS/SASS，本文对一些但不一定为人所知的SCSS特性有用介绍。本文介绍的特性包括灵活使用父选择器、控制流指令、默认函数参数、扩展运算符等；更多CSS/SCSS相关信息，请参考https://parg.co/baH。大幅缩减CSS包体积：本文作者介绍了自己在搭建在线售票网站过程中如何利用样式类名切分和范围隔离来大幅缩减CSS包文件体积的实用技巧。作者主要使用CSSModules，然后自定义其样式类名生成规则，保证样式类名更短，并使用作用域隔离来保证样式隔离。ProgressiveCSSLayout:FromFloatstoFlexboxtoGrid：随着现代主流浏览器逐渐支持CSSGrid布局，越来越多的开发者开始尝试使用这种新的布局方式。但是，鉴于目前还存在大量的旧浏览器，笔者着重介绍了如何使用渐进式CSS布局增强来应对不同浏览器环境下的布局方案，根据运行环境逐步增强；更多multi-CSS/SCSS相关信息，请参考https://parg.co/baH。突破CSS前端面试：与传统软件工程师面试更注重算法不同，前端面试可能更注重综合能力和领域语言掌握；本文重点对面试中常见的CSS问题进行总结和介绍。本文列举的问题包括Resetting和Normalizing的区别、float的工作机制、z-index和stackingcontext的对比、BFC说明等。更多CSS/SCSS相关信息请参考https://parg.co/baH。基于ShadowDOM的样式封装：ShadowDOM是WebComponents标准的重要组成部分，可以对DOM树进行隔离和封装。本文介绍如何使用ShadowDOM实现样式类的隔离和封装。由于CSS没有提供内置的模块化或范围机制，大型项目中不同组件之间的样式很容易造成冲突，因此我们需要选择合适的CSS样式隔离方案。目前常用的隔离方案有BEM命名策略、IFrame、CSSModules、CSS-in-JS等，本文首先回顾一下这些方案的优缺点；然后介绍了ShadowDOM的基本原理以及如何将其应用于样式封装。更多CSS/SCSS相关信息可以在这里找到。ChromeDevTools进阶指南：ChromeDevTools是一个非常强大的开发工具，本文以几十个动图的形式详细生动地介绍了如何使用ChromeDevTools进行常见的开发调试。本文涉及的内容包括如何分析CSS覆盖率、如何分析CPU使用率、如何在不使用扩展的情况下对浏览器进行截图、如何进行Profiling、如何进行时间线回溯等。更多webdebug信息，请参考这里ExploringtheCSSarchitectureinReactJS：本文着重探讨React开发中常用的CSS架构，从BEM命名入手，介绍其对CSS模块切分的意义，以及增强BEM在实际场景中的使用；然后在React实践中引入BEM。接下来，本文将讨论CSSModules，如何配置和使用CSSModules，以及如何实现组件分层解决方案。这种结构背后的想法是通过保持CSS架构以可扩展的方式创建更好的ReactJS项目，该方式可以支持成千上万的组件和开发人员一起工作；然而，这篇文章的真正意义在于打开你的思维，适应新事物。可以在此处找到更多与React相关的信息。开源项目《基于 div 与 纯 CSS 实现的加载动画》：在web开发中，当我们需要用户等待一个异步操作完成时，比如网络请求或者表单提交，我们应该给用户友好的提示。而CSSLoader是一个仅基于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样式来自定义样式。也是非常值得借鉴的编辑器开发范例。
