The future of CSS

Objective

If you are interested in CSS preprocessor, then this article may be a good fit for you.

Beginner CSS preprocessor, in fact, I do not quite understand why need to use this kind of thing, and then want to understand one thing, everything is for maintainability. Like the picture below.

There's a little bit of space on the left, and the rest of the elements are always the same, but if you don't use a preprocessor, maybe we'll write

Css

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

But the problem is, if you need to change all the spacing, you have to go to replace, which brings a lot of unnecessary work, if the use of preprocessor is good, because the preprocessor allows you to use variables, you can like a programming language, define a global variable, where needed, reference the global variable, Change, just need to modify one place is good, suppose the code is as follows:

Css

var pad = 12px;. Box{padding:pad;}. Footer{padding:pad;}

This means that a large part of the preprocessor is designed to address maintainability, and this chapter explains the post processor.

So what's the difference between a post processor and a preprocessor?

You can understand that the post processor is like a dynamic language, and the preprocessor is like a static language. The preprocessor is the result of compiling the results in advance, and then the processor is different, the value is determined at run time.

The future of CSS

More properties and functions will be supported in the future CSS, including variables, nesting, value calculations, and so on, which we will explain in this chapter.

Note: Since most of the content in this section requires a future version of CSS, your browser may not be effective, but there is a plugin (Cssnext) that solves this problem, and the use of this plugin is reviewed in the last section of this section.

CSS variables

1. Basic use of variables

The most favorite non-CSS variables in these new features are the CSS variable names that are set by custom properties (to implement global variables that need to be html declared in or body also in :root pseudo-classes), and custom attributes must be accessed with the -- start and use var() . 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;}

Effect 13.11

Figure 13.11 Variables

Above we :root have defined several variables in the global and then use them in the a element through var functions.

It is important to note that these variables are sensitive to capitalization, such as: --color and --Color are two different variables.

These variables can also be inherited, as in the following paragraph:

Css

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

Effect 13.12
CSS variables

Figure 13.12 Inheritance

These variables also have cascading, the following code:

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

As in this paragraph, we declare one in and declare it again --head-color .box , then it will eventually be used as defined in the parent element --head-color , the nearest principle, the effect 13.13

Figure 13.13 Variables also have cascading

However, it is important to note that these variables are not supported !important , that is, set and not set is the same, no use, as follows:

Css

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

Effect 13.14
CSS variables

Figure 13.14 Variable does not support!important

See, although we have set up --head-color !important but still be stacked, if the normal situation should be like the following code:

Css

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

Effect 13.15

Figure 13.15 If that's the way it should be.

This var function also supports a very powerful feature that allows you to pass a default parameter that uses the default value when the variable does not exist, as follows:

Css

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

Above we var used a default value in the, when --head-color does not exist will use orange , effect 13.16

Figure 13.16 using the default values

The meaning of 2.CSS variables

If you have used some programming languages, you will not forget how important variables are, as in Javascript , we often write such a piece of code:

Javascript

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

In this code we oBox use variables to reference .box elements, in the next time we do not need to retrieve this element, which brings us a lot of convenience. Variables are equally important in CSS, or you can make Less and Sass wait for preprocessing, because they support programming in CSS like programming languages, so they are fascinating for a long time. Reasonable use of variables in CSS can alleviate a lot of work, as well as maintainability. For example, the main color of a website, they are basically fixed, then we can use variables to store them, the other is when the site revision, if the site master color changes when we only need to change the corresponding variables, which is perhaps the biggest advantage of variables. Another advantage of using variables from another perspective is that there is consistency, like the font size of all the elements in the page is the same variable that is referenced, so when we change this variable, the font size of the other elements changes accordingly, let's take a look at the following code:

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;  }}

Above when the screen width is greater than that 600px , these three elements will change the font size accordingly, using this can and rem comparable. Perhaps you would also like to assign one element a --main-size larger font than the other, so we can use a combination of calc functions as follows:

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);}

Effect 13.17

Figure 13.17 Setting a style individually

calcAllows you to use the COMPUTE function, but note that a space is required in the middle.

While these are just a few simple examples, these are enough to show how important CSS variables are, and don't forget to use them in future CSS writing.

Apply rule set (@apply)

I think if you experience the component, then you @apply will be put down, simply @apply can achieve a smaller combination. As follows:

Css

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

In the above we define a code snippet that is used to hide text when an element overflows --overflow-ellipsis , and when we need it only by @apply referencing it, it is really a useful function, not to think of a function in JavaScript.

If a piece of code is duplicated, you might want to try it @apply .

Media queries for the future

1. Custom Media queries

Use a custom media query to make it more semantically, using the following:

Css

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

@custom-mediato set up a media rule. It doesn't feel right? Okay, let's see the next feature.

2. Limit the scope of media queries

Before, if we wanted to implement a limit on the scope of media queries might be this:

Css

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

Above we limit the width of the screen between 320 and 640 to make the page background red, but now we can:

Css

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

is not more at a glance, of course it can also be combined @custom-media to use, as follows:

Css

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

Custom Selectors

Have you ever thought about defining selectors, and then we'll implement one, as follows:

Css

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

Custom selectors are defined by @custom-selector , followed by a :-- custom selector name, followed by the selector you need to define, multiple separated by commas, if you do not understand, you can see the following code, the above and the following code effect is the same.

Css

. Main H2,.main h3{  font-size:18px;  Font-weight:normal;}

The difference between the two pieces of code above may be that the custom selector is more flexible and convenient.

Selector nesting

Selector Nesting is a feature I like very much, saying that I used the preprocessor because it has this function, small and a bit of salt-less code

Css

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

It has the same effect as the following code:

Css

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

There is no longer do not want to use the pre-processor impulse, in addition, for media queries we do not need & to use to reference, directly in the curly braces can be used, as follows:

Css

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

The effect is the same as the following code:

Css

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

It also supports more complex nesting (rule nesting), as in the following paragraph:

Css

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

Rule nesting requires the use of keywords @nest , and the effect is the same as in the following paragraph:

Css

P a{    color:red}

The color function color is used by the following:
Color function

Css

body{  Background-color:color (Pink A (30%));}

This code means adding a background color to the body and a transparency of pink 30%, as in the following code:

Css

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

Of course you can also use other color notation, such as:

Css

body{  Background-color:color (#666 A (30%));}

This is still more convenient.

More features in this area can be viewed in https://drafts.csswg.org/css-color/#modifying-colors.

Initial value

We know that a p default is a block element, so if you don't want it to become a block element by default, you can initial set it to the initial value. As follows:

Css

p {  display:initial;}

I'm the real div,t_t.
I'm the real div,t_t.

Effect 13.18 Shows

Figure 13.18 Initial values

Here it is in a row, because display the initial value is inline , and why not p display set initial it to its default is block because the browser p has set the default style, that is, initial you can remove the browser default style.

If you want to remove all the browser default styles from an element, you can:

Css

p{  all:initial;}

But it is not particularly recommended that you do so, preferably on demand.

Cssnext plug-in use

Cssnext plugin allows you to write a future version of CSS in CSS, it will convert the code into browser-compatible code, but to use cssnext we have to download a postcss, then what is POSTCSS? This is what the authorities say:

Tools to convert CSS using JavaScript

Here does not want to explain in detail postcss is what, more about Postcss's instructions can go to http://postcss.org/official website to view, next we install POSTCSS

1. Installing POSTCSS-CLI

NPM Install Postcss-cli-g

2.

NPM Install Postcss postcss-cssnext-g

After downloading, we then download the cssnext following:

In order to facilitate our use of the command line tool, if you want to use the command line tools postcss need to download postcss-cli , here we are npm to download, npm is a package management tool, here do not explain, if you do not know npm what is, I think, you should be front-end newcomer, It is recommended to search through search engines If you do not understand. npmofficial website https://www.npmjs.com/

After the installation is complete, we can start using it as follows:

Postcss styles.css-u postcss-cssnext-d Dist

Effect 13.19 Shows

Figure 13.19 Entering this piece of code

The above code means to use postcss-cssnext this plug-in to styles.css convert the code inside to a compatible code, -d indicating which directory to output to, -w can be used to listen to changes in the file, when the file changes will automatically output files, as follows:

Postcss styles.css-u postcss-cssnext-w-D Dist

The specific results are as follows:

Source:

Css

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

The converted code:

Css

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

