You can finally stop using CSS Preprocessor while working on your frontend code, almost.

what do i mean by that you may ask?, well as we know CSS today with its basic box-model and animation and transition, keyframes and such keywords,
CSS is moving torwarsd to be a more programming language with variables, functions etc

CSS has for a couple of years now implemented a way to have global variables to define and use across your workflow

:root {
  --container-width: 600px;
  --container-height: 800px;
}

body {
  height: var(--container-height); -> 800px
  width: var(--container-width); -> 600px
}

and compared to Scss or Sass

$container-width: 600px;
$container-height: 800px;

body {
  height: $container-height;
  width: $container-width;
}

// in css
body {
  height: 800px;
  width: 600px;
}

And in Less preprocessor

@container-width: 600px;
@container-height: 800px;

body {
  width: @container-width;
  height: @container-height;
}

// is css
body {
  height: 800px;
  width: 600px; 
}

As you see above the aproach to define is different in a way that en normal CSS variables are defined in “:root” and in sass its defined by dollar signs
which is only transpiled to use the values as you see in above examples

Nesting

One of the most used features while working with preprocessor has been selector nesting for better structure and better developer experience
This feature is finally ready for production ready CSS code, this is really exciting because this is one of the main reasons for me to use preprocessors

The CSS nesting module defines a syntax for nesting selectors, providing the ability to nest one style rule inside another, with the selector of the child rule relative to the selector of the parent rule.

CSS nesting is different from CSS preprocessors such as Sass in that it is parsed by the browser rather than being pre-compiled by a CSS preprocessor.

CSS nesting helps with the readability, modularity, and maintainability of CSS stylesheets. It also potentially helps reduce the size of CSS files, thereby decreasing the amount of data downloaded by users.

Read more about native CSS nesting here.

How do i use the nesting feature in CSS?

i will show you how we do it in the Sass preprocessor with SCSS

.container {
  h2 {
    font-size: 12px;
    span {
      // code goes here
      font-size: 10px;
    }
  }
  
  p {
    font-size: 14px
  }
}

// this transpiles to following
.container h2 {
  font-size: 12px;
}

.container h2 span {
  font-size: 10px;
}

.container p {
  font-size: 14px;
}

The above example looks good and works as we expects, but how would the syntax be in .css files without any preprocessors

.container {
  & h2 {
    font-size: 12px;
    
    & span {
      font-size: 10px;
    }
  }
  
  & p {
    font-size: 14px;
  }
}

/*
* This should work as following
*/
.container h2 {
  font-size: 12px;
}

.container h2 span {
  font-size: 10px;
}

.container p {
  font-size: 14px;
}

This is just some of the native css features that has taken form from preprocessors as Sass and Less