The future of CSS

Preface

If you are interested in CSS preprocessors, then this article may be suitable for you.

When I first learned about CSS preprocessors, I actually didn’t quite understand why I needed to use this kind of thing. But then I figured out one thing, everything is for maintainability. For example, the picture below

has a little spacing from the left, and the spacing set by other elements is often the same, but if we don’t use a preprocessor, maybe we will be like this Write

CSS

.box{
padding:12px;
}
.footer{
padding:12px;
}
....{
padding:12px;
}

but the problem is that if you need to change all the spacing, you have to To replace, this brings a lot of unnecessary work. It will be easier if you use a preprocessor, because the preprocessor allows you to use variables. You can define a global variable like a programming language and use it when needed. place, refer to this global variable. When changing, you only need to modify one place. Suppose the code is as follows:

CSS

var pad = 12px;
.box{
padding:pad;
}
.footer{
padding:pad;
}

In other words, a large part of the preprocessor is to solve maintainability. This chapter explains the postprocessor.

So what is the difference between a postprocessor and a preprocessor?

You can understand it this way, a postprocessor is like a dynamic language, and a preprocessor is like a static language. The preprocessor compiles the results in advance, but the postprocessor is different, the value is determined at runtime.

The future of CSS

In the future, CSS will support more properties and functions, including variables, nesting, value calculations, etc. We will explain them in this chapter .

Note: Because most of the content in this section requires future versions of CSS to support it, your browser may not necessarily have the effect. However, there is a plug-in (cssnext) that can solve this problem. Please inquire about the use of this plug-in. Check out the last section of this section.

CSS variables

1. Basic use of variables

Among these new features, my favorite is none other than CSS variables. CSS variable names are determined through custom attributes. Settings (to implement global variables, they need to be declared in html or body or in the :root pseudo-class), and custom attributes must start with --Start with , use var() to access. As follows:

CSS

:root{
  --colorRed:red;
  --size:16px;
  --h:35px;
  --l-h:35px;
}
 
a{
  display:block;
  height:var(--h);
  line-height:var(--l-h);
  color:var(--colorRed);
  font-size:var(--size);
  outline:1px solid #666;
}

The effect is shown in Figure 13.11

:root, and then used these variables through the var function in the a element.

--color and --Color are two different variables.

CSS

:root{
  --color-red:red;
}
.box{
  color:var(--color-red);
}

CSS variables

:root{
  --head-color:red;
}
.box{
  --head-color:blue;
}
.box p{
  color:var(--head-color);
}

--head-color globally and declare it again in .box, then it will eventually use the -- defined in its parent element. head-color, the principle of proximity, the effect is as shown in Figure 13.13

##Figure 13.13 Variables are also cascading

But still It should be noted that these variables do not support

, which means that setting it is the same as not setting it, and it is useless at all, as follows:

:root{
  --head-color:red !important;
}
.box{
  color:var(--head-color);
}
.box{
  color:blue;
}

Figure 13.14 Variables do not support !important

See it, although we give

is set !important but it is still cascaded. If it is normal, it should be like the following code:

.box{
  color:red !important;
}
.box{
  color:blue;
}

##Figure 13.15 If possible, it should look like this

var

CSS

:root{
  /*--head-color:red;*/
}
.box{
  color:var(--head-color,orange);
}

以上我们在var中使用了一个默认的值，当--head-color不存在就会使用orange，效果如图13.16

图13.16 使用默认值

2.CSS变量的意义

如果你使用过一些编程语言，你不会忘记变量是多么的重要，如在Javascript中，我们经常会写这样一段代码：

JavaScript

var oBox = document.getElementById('box');
oBox.style.width = '100px';
oBox.style.height = '100px';
oBox.style.backgroundColor = 'red';

在这段代码中我们通过oBox变量来引用.box元素，在下次的使用中就不需要重新去获取这个元素了，这样给我们带来了很大的便利。在CSS中变量也同样重要，不然你让Less、Sass等预处理情何以堪，正是因为它们支持在CSS中像编程语言一样编程，所以在之前的很长一段时间里它们是那样的让人着迷。在CSS中合理的使用变量，可以减轻不少的工作，以及可维护性。比如一个网站的主调色，它们基本都是固定的，那么我们完全可以使用变量来储存它们，另外一点就是当网站改版时，如果网站主调色改变时我们只需要改变相应的变量即可，这或许就是变量的最大好处吧。从另一个角度来讲使用变量的另一个好处就是，具有一致性，比如页面中所有元素的字体大小都是引用的同一个变量，那么当我们改变这个变量时，其他元素的字体大小都会相应的改变，我们来看一下，下面这段代码：

CSS

:root{
  --main-size:12px;
}
.box{
  font-size:var(--main-size);
}
.box2{
  font-size:var(--main-size);
}
.box3{
  font-size:var(--main-size);
}
 
@media screen and (min-width:600px){
  :root{
    --main-size:16px;
  }
}

以上当屏幕宽度大于600px时，这三个元素都会相应的改变字体大小，使用这个可以和rem媲美。也许你还想给其中一个元素单独指定一个比--main-size大一点的字体，那我们可以结合使用calc函数，如下:

CSS

:root{
  --main-size:12px;
}
.box{
  font-size:var(--main-size);
}
.box2{
  font-size:calc(var(--main-size) + 2px);
}
.box3{
  font-size:var(--main-size);
}

效果如图13.17

图13.17 单独设置某个样式

calc允许你使用计算功能，不过需要注意的是中间需要一个空格。

虽然以上只是几个很简单的例子，但这些也足以说明CSS变量是多么的重要，在以后的CSS写作中不要忘了使用它。

应用规则集(@apply)

我想你如果体验过组件化，那么你对@apply肯定会爱不释手，简单来说@apply可以实现更小的组合。如下：

CSS

:root{
  --overflow-ellipsis:{
    overflow:hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  };
}
.title{
  width:200px;
  @apply --overflow-ellipsis;
}

在以上我们定义了一个用来实现当元素溢出时隐藏文字的代码段--overflow-ellipsis，当我们需要时只需要通过@apply来引用即可，真的是很实用的一个功能，不由想起来了Javascript中的函数。

如果某段代码是重复的，你不妨试试@apply。

未来的媒体查询

1.自定义媒体查询

使用自定义的媒体查询使之更加语义化，使用如下：

CSS

@custom-media --big-viewport (max-width:1100px);
 
@media (--big-viewport) {
  body{
    background-color:red;
  }
}

通过@custom-media来设置一个媒体规则。感觉没什么用？好吧，来看下一个功能。

2.限制媒体查询范围

以前如果我们想实现一个限制媒体查询的范围也许是这样的：

CSS

@media (min-width: 320px) and (max-width: 640px) {
  body{
    background-color:red;
  }
}

以上我们限制屏幕的宽在320到640之间时让页面背景变成红色，但现在我们可以这样：

CSS

@media (width >= 320px) and (width <= 640px) {
  body{
    background-color:red;
  }
}

是不是更加一目了然了，当然它还可以结合@custom-media来使用，如下：

CSS

@custom-media --noly-mobile (width >= 320px) and (width <= 640px);
 
@media (--noly-mobile) {
  body{
    background-color:red;
  }
}

自定义选择器

想过自己来定义选择器吗，接下来我们就来实现一个，如下：

CSS

@custom-selector :--title h2,h3;
 
.main :--title{
  font-size:18px;
  font-weight:normal;
}

自定义选择器通过@custom-selector来定义，后面跟随一个:--接着是自定义选择器的名称，后面是你需要定义的选择器，多个用逗号隔开，如果你不理解的话，可以看下面这段代码，以上和下面这段代码效果是一样的。

CSS

.main h2,
.main h3{
  font-size:18px;
  font-weight:normal;
}

要说，上面这两段代码的区别，可能就是自定义选择器更加灵活以及方便吧。

选择器嵌套

选择器嵌套是我非常喜欢的一个功能，话说当初我使用预处理器就是因为它有这个功能，小二来一段不加盐的代码

CSS

p {
  & h2 {
    font-size:16px;
    &.title{
      color:red;
    }
    & span{
      color:pink;
    }
  }
}

它的效果和下面这段代码一样：

CSS

p h2 {
    font-size: 16px
}
p h2.title {
    color: red
}
p h2 span {
    color: pink
}

有没有一种再也不想用预处理器的冲动，另外对于媒体查询我们不需要用&来引用，直接在大括号中使用即可，如下：

CSS

p {
  @media (max-width:1100px) {
    background-color:red;
  }
}

效果和下面这段代码一样：

CSS

@media (max-width:1100px) {
    p {
        background-color: red
    }
}

它还支持比较复杂的嵌套（规则嵌套），如下这段：

CSS

a{
  @nest p &{
    color:red;
  }
}

规则嵌套需要使用关键字@nest，效果和下面这段一样：

CSS

p a{
    color: red
}

颜色函数通过color使用，如下：
颜色函数

CSS

body{
  background-color:color(pink a(30%));
}

这段代码的意思是说给body添加了一个背景为pink的颜色并且透明度为30%，和下面这段代码一样：

CSS

body{
  background-color:rgba(255, 192, 203, 0.3);
}

当然你也可以使用其它的颜色表示法，如:

CSS

body{
  background-color:color(#666 a(30%));
}

这个还是比较方便的。

更多这方面的功能可以到https://drafts.csswg.org/css-color/#modifying-colors中查看。

初始值

我们知道一个p默认是块元素，那么如果你不想它默认变成块元素可以通过initial将它设置成初始值。如下：

CSS

p {
  display: initial;
}

我才是真正的DIV，T_T
我才是真正的DIV，T_T

效果如图13.18所示

图13.18 初始值

这里它之所以在一排了，是因为display的初始值就是inline，而为什么不将p的display设置成initial它默认是block是因为浏览器给p设置了默认样式，也就是说initial可以去掉浏览器默认样式。

如果你想去掉一个元素中的所有浏览器默认样式，可以这样：

CSS

p{
  all:initial;
}

但不是特别建议你这样，最好还是根据需求来。

cssnext插件使用

cssnext插件允许你在CSS中写未来版本的CSS，它会将这些代码转换成浏览器兼容的代码，不过要使用cssnext我们还得下载一个postcss，那么postcss是什么呢？官方是这样说的：

使用JavaScript来转换CSS的工具

这里并不想详细的讲解postcss是什么，更多关于postcss的说明可以到http://postcss.org/官网查看，接下来我们来安装一下postcss

1. 安装postcss-cli

npm install postcss-cli -g

2.

npm install postcss postcss-cssnext -g

下载完以后，我们接着下载cssnext如下：

为了方便我们这里使用的是命令行工具，如果想在命令行工具中使用postcss需要下载postcss-cli，这里我们是通过npm来下载的，npm是一个包管理工具，这里不做讲解，如果你不知道npm是什么，我想，你应该是前端新人，建议如果遇到不懂的通过搜索引擎来搜索。npm官网https://www.npmjs.com/

这些都成功安装完以后我们就可以开始使用它了，如下：

postcss styles.css -u postcss-cssnext -d dist

效果如图13.19所示

图13.19 输入这段代码

以上这段代码的意思是用postcss-cssnext这个插件将styles.css里面的代码转换成兼容的代码，-d表示要输出到哪个目录，-w可以用来监听文件的变化，当文件变化时会自动输出文件，如下：

postcss styles.css -u postcss-cssnext -w -d dist

具体效果如下：

源代码：

CSS

:root{
  --main-color:red;
}
p{
  display:flex;
}
span{
  color:var(--main-color);
}

转换后的代码：

CSS

p{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
}
span{
  color:red;
}