Comment by _the_inflator | Hacker News Reader

Comment by _the_inflator | Hacker News Reader

Parent Full thread

CSS and HTML are constantly evolving, and so its demands. However for me CSS is way more straight-forward than in the 90th and 00th.

The standards addressed a lot of the pains and struggles we had with floats/clearfix etc. This was challenging but nothing im comparison to supporting IE 6-9, FF, Safari, Opra etc. at the time. Also hacking in JavaScript added to the complexity.

Nowadays I can do with 10 lines of grid and flex what great CSS frameworks like Bootstrap abstracted away behind 1000th of lines of code.

Also testing is way easier, since browser vendors follow standards and there is chromium everywhere.

Earlier we did a lot of div soup, I remember fondly CSS zen garden as well as OneDiv.

Awesome times to be a web dev, you work on products (PWAs!) not on browser hacks.

My 2 cents.

Btw, there is an effort to have modern-day CSS zen garden: https://stylestage.dev

"div soup" – I like that.

The present-day CSS frameworks use "class soup."

For example, tailwind (which I like):

  <button class="bg-teal-500 hover:bg-teal-600 focus:outline-none focus:shadow-outline">

I avoid Tailwind-style CSS frameworks. I prefer SCSS and, if needed, mixins. Meaningful class names are much better, IMO.

This sort of class soup brakes the principal of DRY. Much better to use CSS to style.

    button {
      --background: teal;
      --focus-ring:
        2px 2px 5px skyblue,
        -2px -2px 5px skyblue;

      background: var(--background);
      box-shadow: none;
    }

    button:hover {
      --background: wheat;
    }

    button:focus-visible,
    button:focus:not(:focus-visible) {
      outline: none;
    }

    button:focus-visible {
      box-shadow: var(--focus-ring);
    }

Now you will never forget to add that `hover:bg-teal-600` class to your buttons.

Reply on news.ycombinator.com