My CSS knowledge was still stuck in 2010, with a bit of learning since then. So after seeing some impressive modern one liners I decided to look into modern CSS and compatibility.

It took about a week to write a new, very clean and very simplified CSS style sheet to replace Bootstrap. We own it, since it is tailored for our app we don't need to use many classes (the HTML element defines the style). The sheet is about 1000 lines of CSS, 50 lines of Javascript, and supports dark/light mode.

First we replaced the navbar – a global element. Now we are replacing screen by screen with the new style sheet.

It uses modern CSS nesting – but we still run it through sass because enough customers are using Android or older versions of Chrome that don't support the nesting. Otherwise we haven't had any reported problems.

MDN is a fantastic learning resource for all of this.

Everything can be done so much more easily today with vanilla CSS and JS that it's hard to justify the overhead despite knowing there'll be a certain amount of customization work required to implement a good UI.

Still using a CSS preprocessor though, like you, but soon that will probably be gone too.

Typically it takes just a few minutes to switch out the CSS.

Now, there are a few very complex screens that require more effort (a lot of data viz and variable state). Those we evaluate - maybe we will punt on the upgrade – or maybe we dig in and do it if there is nothing urgent on the books.

How does sass help in this instance?

If you want to use CSS Nesting and be backwards compatible with older browsers, the PostCSS plugin postcss-preset-env handles that and lots of other new CSS features that older browsers don't support [2].

[1]: https://sass-lang.com/blog/sass-and-native-nesting/

[2]: https://preset-env.cssdb.org

  .foo {
    .bar {
      color: red;
    }
  }

  .foo .bar { color: red; }

Once those browser versions roll off we will be able to remove sass altogether.

First there was the DIY Era, when layout options were limited and CSS implementations were riddled with bugs and browser differences. Most folks coded their own layouts using a small bag of tricks (e.g. float + clear-fix). It was messy, but it all fit in your head.

Then came the Framework Era, when lots more things became possible, but the size of the spec exploded, and with it the number bugs and incompatibilities. A common choice at this point was to use a framework.

This article fits with the idea that we've entered the Reference Era. Implementations have matured enough that browsers do what you want without arcane hacks and workarounds. You just need a good cheat-sheet, because the spec has long since stopped fitting into most peoples' heads.

I call it the Neopets era because I first learned HTML from all the hacks people did to customize their personal pages.

Basically anything you wanted.

I think what CSS frameworks offer tends to be more on the lines of consistency which I always struggle with when doing my own CSS.

But this is the basic paradigm I try to use most of the time too.

I'm using vscode with codeium. It autocompletes variables[1] across files.

[1] And almost everything else.

[1]: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value...