在开始聊CSS选择器Level 4（Selectors Level 4）之前，先要明确一个简单的概念。时至今日，在CSS的世界之中再不会有大版本的称谓，比如以前大家熟悉的CSS2.1、CSS3。现在的CSS都只会以CSS模块的版本来进行区分，比如我们今天要聊的CSS选择器，其最新版本就是：CSS Selectors Level 4。在CSS Selectors Level 4中为选择器增添了不少的新特性，当然这些新特性有的已得到浏览器的支持，有的只得到部分主流浏览器的支持。所以接下来，花点时间学习一下，以备后用。

属性选择器是很强大很神奇的。很多时候可以帮助你摆脱一些棘手的问题，可以让你避免类名的添加，甚至还可以指出代码中的一些问题。属性选择器是复杂而又强大的，但不用担心，因为它也是易于学习和使用的。在本文中，将会学习到CSS属性选择器的强大功能以及如何在实际工作中运用它。并提供了一些关于如何使用属性选择器的一些个人想法。

前段时间@Zell Liew的博客深入的介绍了CSS中伪选择器:empty和:blank相关的知识。那么:empty和:blank究竟有什么作用，又在什么场景下使用呢？今天我们来一起看看，它们怎么使用，更应该应用在哪个场景之下呢？

记得在去年双11的互动页面中，我们折腾了一波iPhone8、iPhone8 plus和iPhone X的适配，特别是iPhone X刘海区域的适配。针对这方面的页面适配，沉淀出相应的适配方案。而今年的双11期间，苹果又推出了iPhone XS、iPhone XR和iPhone XR Max以及众多的安卓刘海设备。言外之意，前端在这方面的适配变得越来越复杂。面对众多场景，我们应该怎么去面对呢？接下来聊聊我在今年双11的主互动玩法中是怎么处理的。

到目前为止，CSS的渐变属性linear-gradient和radial-gradient已经是很成熟的CSS特性了，而且repeating-linear-gradient和conic-gradient也越来越成熟。CSS渐变特性对于我们的帮助已经非常强大了，它们可以帮助我们绘图、创建图片占位符、制作环形进度条等等。另外还可以通过transition和animation让渐变动起来。

2017年5月18日，W3C的 CSS工作组（CSS Working Group） 发布了 CSS逻辑属性和值（CSS Logical Properties and Values Level 1） 的首份工作草案（First Public Working Draft）。不同的书写模式（writing mode）中，可以抽取出共性的抽象概念（如开始位置，或行），这些逻辑抽象概念需要在不同书写模式下映射到左或右、上或下等物理的概念上。一些CSS布局可能依赖这些共性的逻辑概念。该 CSS 模块给出了用于通过逻辑方式（而不是基于物理坐标、书写方向和维映射等）控制布局的逻辑属性和取值（logical properties and values）。这个模块来源于CSS21中关于逻辑属性和值的特性。

Vue插件是向应用程序添加全局特性的一种强大而又简单的方法。它有多种用途，从分发应用程序范围的组件到向应用程序添加路由和不可变数据存储等附加功能。从概念上讲，Vue插件是非常简单。它实际上只是一个带有install函数的对象，它接受两个参数：全局的Vue对象和一个包含用户定义选项的对象。然而，一个像这样简单的Vue插件仍然可以得到相当大的效果。

这篇文章主要帮助我们深入的学习Vue的组件和mixins，它们帮助你扩展基本的HTML元素，用来封装可重用的代码。在较高的层次上，组件是定制的元素，Vue的编译器附加了行为，而mixins为你提供了一个保持代码可重用性的方式，从而使你的代码保持干净和易于维护。

在项目开发的时候，常会碰到这样的一种现象：有两个组件非常相似，比如较为熟悉的Modal、Tooltip和Popover，它们都具有同样的基本函数，而且它们之前也有足够的不同。很多时候，就让人很难做出选择：是把它们拆会成多个不同的组件呢？还是只使用一个组件，创建足够的属性来改变不同的情况。在Vue中，对于这样的场景，官方提供了一种叫混入（mixins）的特性。使用mixins允许你封装一块在应用的其他组件中都可以使用的函数。如果被正确的使用，他们不会改变函数作用域外部的任何东西，所以多次执行，只要是同样的输入，总是能得到一样的值。既然Vue的mixins这么优秀，那应该怎么使用呢？今天我们的目的就是学习如何在Vue的项目中使用mixins。

默认情况下，Vue组件之间的通讯是通过Props来完成的。Props是从父组件向子组件传递属性。Props总是从父组件向子组件传递。随着应用程序复杂度的增加，你会慢慢遇到所谓的Prop Drilling，这里有一篇文章介绍了这方面的东西，虽然是React方面的，但也适用于Vue。Prop Drilling是将props向下、向下、向下传递给子组件的想法 —— 正如你想象的那样，这通常是一个乏味的过程。因此，繁琐的Prop Drilling可能是一个复杂的潜在问题。另一个与不相关的组件之间的通讯有关。我们可以通过使用事件总线来解决这些问题。什么是事件总线？这个名字本身就是一个总结。这是一个组件将props从一个组件传递到另一个组件的一种运输方式，无论这些组件伴于树的哪个位置。