Question 237767 in CSS Question posted in
Some basic documentation can be found here.

Is there a way to minify CSS with new nested syntax?

I’m using new CSS feature of nesting classes like that:

  .nav-bar {
    width: 100%;

    @media screen and (min-width: 768px) {
      display: flex;
    }

    .container {
      display: flex;

      &::after,
      &::before {
        content: none;
      }
     }
   }

And I was wondering how can I minify this type of code?
Also, can you please advice if it’s a good idea to use CSS nesting in 2023?
On caniuse.com it shows that this feature is supported by 75% of browsers.

I’m asking if this is a good idea because I see a lot of CSS errors in the inspector, like these ones:
inspector screenshot

I have tried online minifier tools, and none of them worked as expected.

Tags:

2

Answers


  1. 0

    If you want to use nesting like that, I reccomend SASS.
    https://sass-lang.com

    To fix the error in the inspector, use just one double colon symbol after &.

          &:after,
      &:before {
        content: none;
      }
     }
    Login or Signup to reply.
  2. 0

    Use lightningcss to minify your code. Also it would be highly advised that you setup some sort of backwards compatible code for the browsers that don’t support those CSS features. Whether it is a good idea or not is up to what you do with those features and the support you give for older browsers.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search