在Web技巧的第五期中专门提到一个有关于CSS实现黑暗模式和高亮模式的技术方案。即使用新的媒体查询条件prefers-color-scheme的值dark和light来进行切换，这是从最底层也是最原生的解决方案，除此之外还可以通过CSS的混合模式属性来模拟。当然，除了期刊中提到的技术方案之外，还有其他的一些解决方案。今天我们就来一起学习一下，如何实现黑暗模式和高亮模式之间的切换。

在9102年终于有了一份属于CSS状态的报告。对，这是CSS发展20多年以来第一份属于自己的状态报告。大家的印象中可能只有JavaScript相关的状态报告，对于CSS的状态报告并无了解（那是以前没有）。正如报告开篇所说，在Web开发家族中，JavaScript更似一位愤怒、叛逆的少年，每年都会经历一个新阶段。而CSS却一直以来更似一位勤奋好学，举止得体的少年，他总是保持礼貌，从不草率的做出任何决定。不过有迹象表明，CSS可能正经历着与JavaScript刚刚经历的同样动荡的青少年时期。Flexbox，Grid，CSS-in-JS在9102年都来了。可以说，CSS终于把头发染成粉红色，并像它一直想要的纹身了。在这份有史以来第一份关于CSS状态调查中，调查了一万多名开发人员。在这份详尽的报告中我们可以看到哪些CSS特性使用得最多，哪些工具正在被采用等等。

最近项目开始换React的工程，感觉好多东西都得重新开始，特别在撸CSS的时候。说实话和Vue的工程相比，体感差完了。在Vue的工程中除了Modules之外还可以使用CSS的作用域scoped的概念。用久了Vue的同学，在这方面的感觉爽死了，但是突然切到React的工程体系之下，这方面的感觉突然不要不要。拿个实例来说吧（可能我做得不到位），组件的CSS是全局的，有时覆盖起来，除了蛋疼之外，而费时，费成本。

最近开始学着使用React写东西。在写代码时会使用JSX，不了解JSX的相关知识写起代码的效率还是蛮低的。为了能更好的进入状态，打算先把JSX相关的知识和细节了解一下。在这篇文章中我们主要就是来学习一下JSX的相关知识。希望对于像我这样的初学React（或初次接触JSX）的同学有所帮助。

React是什么呢？从React的官网我们可以获知：React是用于构建用户界面的JavaScript库。React使创建交互UI变得轻而易举，为Web应用的每个状态设计简洁的视图，当数据改变时React能有效地更新并正确地渲染组件。这仅是对React的总结性的描述，对于想学习React的同学（或初次接触React的同学）还是希望能更深层的了解React是什么？React中包含了些什么？又是什么使得React变得那么特别？那么这篇文章将会简单的介绍一些React中的一些术语，并探索React的一些特色。最后希望这篇文章能帮助你能先熟悉一些概念，从而不至于在后面的学习过程中感到绝望。而且会慢慢喜欢上并掌握好React。

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

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

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

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

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