The future direction of CSS

When is normal CSS good to replace sass, less, Stylus, and rest?

One of the hardest things web developers have to face is the fact that most people use older, less-functional browsers when they browse the site. Browsers are always adding new features, but you won't normally be able to use them unless you're willing to lose a lot of users who don't have a browser update.

When you use Electron to develop an application, there is no such problem. Because you wrote the electron application code to run on a separate Chromium browser. Chromium is the core engine of Google Chrome, powered by Google. At the same time, it is open source, which means that a large number of developers in the community are optimizing it every day.

CSS Custom Properties

Last week, Electron released a new version that supports CSS custom properties. If you've used pre-processing languages like Sass and less, you're probably already familiar with variables that allow you to define reusable values for color schemes, layouts, and so forth. Variables can keep your style sheet DRY (Don ' t Repeat yourself) and improve maintainability.

Because CSS custom properties are just general properties of CSS, they can be manipulated by JavaScript. This subtle but powerful feature allows developers to dynamically change the visual interface while enjoying the CSS hardware acceleration, and to reduce duplication between the front-end code and the style sheet.

Here is an example of using a custom attribute:

: root {      --primary-color:papayawhip;      --base-line-height:1.4;} . thing {      Color:var (--primary-color);      margin:0 0 Calc (var (--base-line-height) * 1rem);}

View demos on Google Chrome (requires chrome version above 49)

CSS Blending (Mixin) and inheritance

Now, we have variables in our CSS. That's pretty good, but it's not enough for us to write the perfect CSS. What we really need is a way to write reusable CSS. In Sass, less and Stylus, these functions have long existed, but they are not possible in conventional CSS.

Enter the @apply Rule

Someone in Google is developing a new set of specifications:

This specification defines the @apply rule, which allows developers to store a set of properties in a named variable and then refer to them in other style rules.

Here is an example of using the @apply rule:

Body {      --alert: {            color:white;            padding:15px;            Margin:1rem 0;            border-radius:6px;}      } . alert-success {      @apply--alert;      Background-color:olivedrab;}. alert-warning {      @apply--alert;      Background-color:firebrick;}

At the time of writing (April 8, 2016), this feature is still very new and is not supported by Google Chrome or even Canary, but it can be achieved by enabling tag (flag) in the latest Chromium nightly.

To try the @apply rule yourself, you can download the latest chromium and then implement @apply from the Enable tag. The following are the practices in OS x systems:

/applications/chromium.app/contents/macos/chromium \  --enable-blink-features=cssapplyatrules

To see all the cool styles of the above rules, refer to my Codepen Demo:

@apply Codepen demo on Chromium browser

Write the future CSS from now on

Once @apply is supported by chromium and electron, we are able to write clean maintainable styles using native CSS. But before that day comes, we still need to learn the preprocessor to fill in the blanks.

Now there are at least two projects that allow you to write about future Css:myth and Cssnext. Of these two projects, Cssnext is more active and even has a dedicated git issue to facilitate the implementation of the @apply (translator Note: The latest version of Postcss-cssnext already supports @apply rules).

The above is the future of CSS.