上个月2018年TPAC会议刚结束没多久，@Rachel Andrew在Smashing Magazine上面就发表了一篇文章《The CSS Working Group At TPAC: What’s New In CSS?》介绍了CSS中将会有的一些新东西，同时我们国内@安佳 大大也发了一篇有关于参加该会议的总结。就在这个月，@Rachel Andrew在瑞典.马尔默举办的2018年**Øredev 开发者大会**上分享了一个话题就是有关于CSS的一些新东西，同时她还分享了另一个话题《2019年布局有哪些工具包》。我阅读了@Rachel Andrew在该会议上分享的两个话题，但今天主要想根据@Rachel Andrew分享的第一个话题做一些总结：CSS有哪些新东西。希望对大家有所帮助。

CSS中有三个概念是学习CSS必须要掌握的：层叠、继承和权重。今天我们主要来了解CSS中的层叠和继承，对于CSS权重这一部分将放到CSS的选择器中来介绍，因为这一部分和CSS的选择器耦合的更为紧密。不管是初学者还是有一定工作经验的同学，花点时间阅读这篇文章都是很有必要的，这样有利于你对CSS更清楚的了解和理解。感兴趣的同学请继续往下阅读。

在Web页面或应用程序中都可能会有按钮的出现，甚至很多时候链接的样式看起来也像个按钮。那么我们应该怎么来美化按钮的样式呢？在这篇文章中，我们一起来聊聊按钮样式应该怎么才能更好的控制。

动效在Web中一直是一个有争议的问题。动效做得好有助于在你的Web程序上锦上添花，甚至是留住你的用户，也可以具有较好的用户体验；反之，如果动效运用的不好，会给用户带来一种反感，让用户迅速地离开你的应用。怎么提供更友好的动效，并不是今天我们要讨论的重点，我们要讨论的是：**在Vue应用程序中如何添加动效？**在Vue中，提供了多种方法来给你的运用程序添加动效，比如CSS的transition和animation动效，以及在Vue的生命周期的钩子函数中操作DOM。甚至你还要以使用第三方动画库，比如GSAP或Velocity.js来制作动效。

上一节我们学习了Vue 2.0中的<transition>实现元素从状态A到状态B的过渡效果。对于元素过渡的效果是通过CSS的transition来完成，具体什么时候执行是由Vue来控制的。而transition的效果毕竟有所限制，对于一些复杂的动效，还是需要通过别的方式来完成。在Vue中除了transition之外还可以完成animation的效果。也就是可以将CSS的animation运用到Vue中来，实现一些动画效果。今天这篇文章我们就来学习如何在Vue运用CSS的animation。

在《理解CSS的逻辑属性和值》一文中，我们对CSS逻辑属性和值（CSS Logical Properties and Values Level 1）有所了解。事实上对于广大前端开发者而言，自从Web诞生以来，就习惯了使用用物理CSS属性。比如上、右、下和左，映射到CSS的盒模型就是margin、padding和border的top、right、bottom和left设置元素。但随着CSS的书写模式特性的出现，上、右、下和左的概念在某种程度上已经失去了其意义。

今年花了不少的时间在学习DOM相关的知识，经过这段时间的学习，可以通过一些JavaScript的API操作和处理Web页面上的HTML元素。在Web中除了DOM之外还有另外一个对象模型：CSS对象模型（即CSSOM）。或许你已经在项目中已经用过了，只不过没有意识到这一点而以。今天这篇文章中，我们主要来一起探讨有关于CSSOM相关的特性。

用户界面是最直观的呈现给用户，而其中动画在这方面又扮演着重要的角色。正如@Nick Babich所说:动画将用户界面带入生活。而且，UI动画在用户体验方面也是重要的一环。特别是移动端开发的同学更清楚这一点。移动应用中的UI动画是体验的核心部分之一，而不是事后的想法。可是呢？事实上我们经常遇到的Web运用程序或App只是从一个视图跳到另一个视图，并没有给用户足够多的时间来处理当前环境中刚刚发生的事情。同时，很多同学都认为，动画通常在用户体验方面仅仅是锦上添花，并且被认为是不必要的、过渡的或太复杂的，无法实现的，也是因为这些原因，UI动画在很多Web应用中被忽略了。更糟糕的是，缺乏意义的动画会给自己产品体验方面带来损害。

变量对于CSS而言是这两年大家关注的一个话题。对于变量而言，最早是出于CSS的一些处理器语言当中，比如Sass、LESS之类的。随着CSS的发展，变量的概念也被引入到CSS中。时至今日，在CSS中的变量不被称作变量，而被称为CSS自定义属性。该特性让我们维护CSS、编写CSS变得更易。而事实上呢？在CSS最早的变量之一是currentColor。该特性也可以更好的帮助我们编写CSS和扩展CSS。那么今天我们来开另一个话题，currentColor和CSS自定义属性又有何差异呢？接下来的内容，我们就来一起探讨这方面的细节。currentColor和自定义属性之间还是存在一些有趣的区别。这两个都是CSS中动态属性的例子，但是它们的解析方式在一些非常重要的方面还是有所不同的。至于为何不同，接下来的内容将向大家揭开。

CSS 的值和单位是 CSS 另一个独立功能模块，到目前为止，该模块已到了 Level 4 阶段（CSS Values and Units Module Level 4）。今天我们就来聊聊这个模块里的内容。对于 CSSer 来说，对于 CSS 中的值和单位应该不会感到陌生，但大部分同学应该都会把精力集中于单位这一块，事实上也是如此，在这篇文章中，我们所涉及到的大部分内容也是聊单位这一块，对于值这一部分只会花一点点内容略为带过。