今天我们不聊什么是**CSS自定义属性**，而把重点放在CSS自定义属性在组件中怎么使用，她又会给我们设计组件带来什么样的变化和相应的优势。在这篇文章中，我们主要会探讨CSS自定义属性为Web组件服务，以及怎么利用CSS自定义属性来维护组件。

上个周末因为自己要写PPT而没来得急整理，所以又错过了一期。在这一期中，大部分内容将围绕着@Bill Mei的《Top 10 most deadly CSS mistakes made by new and experienced developers》文章中提到观点来展开。这里面的一些观点虽然不完全对，但还是有相应的参考价值，取舍由大家自己来决定。如果你在这方面也有相关的经验，也欢迎在下面的评论中分享。另外在后面会简单的整理几个最近觉得有意思的新东西。感兴趣的同学，请继续往下阅读。

在任何环境之下其实没有最佳，最有最适合，那么在React中编写CSS也是类似的。在React中有很多编写CSS的方式，在社区中讨论最多的应该是CSS In JS 和 CSS Modules。前段时间在《React中CSS Modules的使用》一文中探讨了在React中怎么使用CSS Modules来管理组件和项目的CSS。事实上，使用CSS Modules还是存有一定的缺陷。这篇文章将会和大家一起聊聊React中编写CSS的姿势，然后再会花一些篇幅来讨论CSS Modules编写CSS的最佳姿势。

Tooltips大家很多时候也将其称为提示框，另外还有一个视觉上长得和Tooltips的组件，常常称为Popovers（又名弹窗）。很多时候他们在视觉上长得非常类似，但是共交互上却有明显性的差异，特别是在PC端上：Tooltips一般是通过鼠标的悬浮来触发；Popovers一般是通过点击来触，但在移动端上两者都是通过点击来触发，因为移动端上悬浮的交互行为基本是不存在的。不过我们今天要聊的不是他们的交互行为，而是来看看如何以最好的方式来还原他们的视觉效果，并且能适用各种不同的UI风格。

在上一篇中花了14小节主要和大家一起探讨了Webpack 4.x的一些基本配置，比如初始化项目，添加各种Loader、React、Typescript、Sass、PostCSS、CSS Modules等配置、图片加载、字体加载以及各种代码检测的能力，比如ESLint的配置、Prettier的配置和StyleLint的配置。在接下来这个部分，主要和大家一起来探讨Webpack 4.x中的一些优化方面的配置。比如开发环境的优化、Webpack自身的优化、文件压缩和依赖监控以及应用分析相关的配置。如果感兴趣的话，欢迎继续往下阅读。

上一期咱们围绕着Web动画展开，其中有的动画对部分用户群体会造成不良的反应，会引起癫痫。为此，为了避免这种现象出现，可以使用条件CSS中@media中的prefers-reduced-motion条件来做处理。除此之外，prefers-reduced-motion在<picture>元素中还有一些小技巧，可以帮我们做一些其他有意义的事情。这一期，就从这个特性开始讲起。

前段时间在微信群聊了一个动效的话题： 鼠标悬浮的时候，三个区块依次显示；鼠标移开时，三个区块反向依次消失。如果使用CSS的triansition是否可以实现？借此话题，在这一期中就围绕着Web的动效来展开。Web动效不管是从设计到实现都有很多的话题可聊，比如，动画的设计、交互、实现等等。甚至是实现的技术方案或工具。

CSS的::marker是一个伪元素，最早接触时间应该是在四年前。四年前在《试探列表中的::marker》一文中就提到过CSS的::marker伪元素，只不过在当时，该伪元素只是大家探索性的在聊该属性，而时至今日却不同，Firefox 68已经追随Safari11.1对该伪元素支持了。也就是说，该伪元素离我们越来越近了，以后我们可以使用::marker帮我们做更多的处理。简而言之，使用::marker伪元素，可以对列表做一些有趣的事情，在本文中，我们将深入的聊聊该伪元素。

任何一门语言都有自己的小技巧和新特性，比如Web的三大基石HTML、CSS和JavaScript，在各自的社区中总是有同学在不同的时候梳理一些相关的新特性和小技巧。让这些特性更好的服务于社区，尽量的让大家更好的理解和掌握。另外一个目的是，让更多的同学能把这些新特性运用于自己的项目中。在这一期中，将围绕着JavaScript的一些新特性来展开。希望对大家有所帮助。

作为现代Web开发者就需要对Webpack有所了解，哪怕掌握的不够深入，略知皮毛也对我们自己的工作或学习都是有所帮助的。比如说吧，前段时间折腾React环境下的CSS Modules，就是因为自己对Webpack不了解，有些坑踩了无法立刻解决，就算借助互联网，解的也是知半解（而且现在技术更新太快，网上有些教程根本走不通，不踩不知道，一踩只有泪）。正因为这个原因，促使自己去了解Webpack更多的知识。接下来的内容是一些基础，主要会介绍怎么用Webpack来构建自己的开发环境，感兴趣的请继续往下阅读。