Comment by peeters | Hacker News Reader

Comment by peeters | Hacker News Reader

It's 2018, does CSS supported by modern browsers still lack the basic building blocks of reuse? Why am I being asked to choose between class="resources" (and having to know how to center a div in that resources class) and class="t:center t:wide-margins t:light-bg" (which is basically reintroducing all the harm of style tags). Why can't I, in 2018 and with vanilla CSS, say:

    .resources {
      @include .centered
      @include .wide-margins
      @include .light-bg
    }

It seems like every one of these styling tools is just polishing a turd that is a turd for no reason. I can't imagine why the above would be difficult, it wouldn't have to change anything about the actual application of CSS rules, it could literally just be a simple preprocessor.

Sure give me a library of common ways of doing something. That's great. But the lack of basic code reuse for CSS is staggering. Even if you're doing reuse with SASS you're stuck with the fact that you end up generating a CSS File that's 4-5 times larger than it needs to be.

In 2018 with postcss, you can have the following:

    .resources {
      @apply centered wide-margins light-bg;
    }

And that's exactly what Tailwind is about, btw!

Sadly, as you point, it's not vanilla. It works, though.

If i'm looking at the right thing (https://github.com/pascalduez/postcss-apply), it looks like you can only @apply property sets in name variables, like so

    :root {
      --toolbar-theme: {
        background-color: rebeccapurple;
        color: white;
        border: 1px solid green;
      };
    }

    .Toolbar {
      @apply --toolbar-theme;
    }

Rather than arbitrary CSS classes?

I forgot something! Actually, this isn't the @apply I was thinking of.

Tailwind comes with its own @apply: https://tailwindcss.com/docs/functions-and-directives/#apply

The main selling point of tailwind for me is that it improves iteration time by grouping the CSS with the HTML: I don't need to switch files anymore and also more importantly don't need to come up with ids and selectors. It reduces the level of indirection.

Of course you can say now I mixed style with HTML but if you never intend to change style separately from HTML then why introduce the mental overhead of indirection?

What's wrong with class="centered wide-margins light-bg"? It would do the same as what your .resources class looks like it might do, and it's supported everywhere already.

Nothing when everything's a one-off and you only have one supported theme. But if CSS is your component model (e.g. a card is always just a div but with a special style) then you'll have "centered wide-margins light-bg dropshadow" on every one of those divs, rather than just class="card". Similarly if you want to have two different themes with the same DOM, you can't do so easily.

Nobody who uses Tailwind would suggest copying the same classes over and over again in the example you’re talking about. You would either still create a card component (Tailwind does have the concept of components), or if you were using a framework like Laravel you could create a card blade component that held the tailwind card classes in one place.

I wasn't talking about Tailwind, I was talking about vanilla HTML and CSS. I assumed the question asked of me ("what's wrong with"...) was asked in that context.

I’ve tried just about every “modern” method of styling components over the last few years and this is what I still wish for.

Sass and Less has had this functionality for years.

Reply on news.ycombinator.com