Web中使用一些图案做为背景图案是一种时常可见的，早期一般都是通过图片来完成。直至CSS一些新特性更趋成熟和稳定的时候，会通过CSS的相关技术，比如CSS的渐变属性配合background-size之类的来做一些复杂而又美观的Web图案，运用于background-image之中。随着前端技术不断的革新，不久前看到一个生成Web图片的组件：<css-doodle /> —— 使用CSS绘制图案的Web组件！

最近项目中使用到一个Loading效果，其实是一个很简单的效果，主要是因为这个Loading出现在不同的场景之中，而且大小也不一致。对于这样的效果，往往都会想通过组件的方式来处理，其出发点就是更易维护，易扩展。当然，这对于前端的同学而言并没有什么复杂性，也没有多少技术含量。不过我还是希望把这个过程记录下来。

有人可能会说，CSS很简单，但是“容易”会导致代码混乱。在大家的眼里，使用像Sass或LESS这样的处理器会让事情变得更为简单。但事实上并不一定如此，如果你使用的不小心，你的CSS将变得更难处理，而不是更易处理。Sass？困难吗？Sass的嵌套就展示了这一点，使用不当，Sass的嵌套就是地狱。如果你的Sass代码看起来像这样的，那么你肯定可以使用SEM和BIO来改进你的代码。接下来我就将向你介绍这方面的CSS技术。

在Web页面上常常可以看到某个元素内部有一个很长的单词，元素的宽度不足以容纳它。一个常见的现象就是有一个很长的URL。这会发生什么呢？这取决于CSS，那么CSS如何控制布局，以及CSS如何让文本更合理的方式展示。

要问2018最让人兴奋的CSS技术是什么，CSS Houdini当之无愧，甚至可以去掉2018这个限定。其实这个技术在2016年就出来了，但是在今年3月发布的Chrome 65才正式支持。CSS Houdini可以做些什么？谷歌开发者文档列了几个Demo，我们先来看一下这几个Demo。

假设我告诉你，我可以使用一个HTML元素和五个CSS属性实现下图的效果。而且这个效果没有使用任何一行SVG代码，也没有使用图像（只是在html元素上使用了background设置了一个背景图片，只是为了表明这个元素有一些透明的部分），同样也没有使用JavaScript代码。你一定会觉得很神奇，对吧！有好奇之心，对于我们做前端的同学而言，应该一直都有，只有这样才能做出很多我们一直以为实现不了的效果，比如接下来要介绍的内容。

记得@Lea Verou的《CSS Secrets》一书和前几天@Chris Coyier刚发的帖子都介绍了CSS怎么实现元素斜切口的效果。我也尝试着借助Vue的能力，把这种效果构建成一个Vue组件。我把这种效果定义为外切口。而今天将要聊的是与其刚好相反的一个效果：CSS如何实现内凹角的效果。

最近我在 Codepen 上看到了一个例子，我的第一个想法是这个案例可以只用三个元素完成：一个容器，一个 range 类型的 input 和一个 output 。在 CSS 方面，涉及到使用一个把 CSS 自定义属性作为范围渲染参数的圆锥渐变函数 conic-gradient() 。

去年，我做了一个研讨会之后收集了一些关于CSS Grid布局有趣的东西。今天年，我在另一个工作室工作，我学到了一些更令人兴奋的事情，那就是我们都喜欢布局规范。当然，我不会把这些有趣的东西独享。我很高兴能和大家一起分享这些有趣的东西。

大多数编程语言都支持变量。但遗憾的是，CSS从一开始就缺乏对原生变量的支持。如果写CSS的话，那是没有变量的，除非你使用像Sass这样的CSS处理器。变量是Sass这样处理器的一个非常有用的特性之一。这也是你尝试使用的理由之一。Web技术发展是非常快速的。我很高兴地告诉你，CSS现在终于支持原生的变量了。虽然CSS处理器还支持更多的特性，但是CSS添加原生的变量是很好的。这些举措使用Web更接近未来的技术。在这篇文章接下来的内容中，我将向你展示如何在CSS使用变量，以及如何使用它们让你的工作变得更轻松。