Master Styles – The First Virtual CSS Engine | Hacker News Reader

Master Styles – The First Virtual CSS Engine

styles.master.co

32 pointsskilled29 comments

I’m confused. What does “virtual CSS engine” mean? It looks like it’s CSS inside the class attribute, and it’s either compiled or just a CSS framework?

Also the chats.html example just shows how unnecessarily repetitive it is.

I think you’re confused because the landing page sucks. I don’t know what a virtual language is either, is it a thing or is it their own marketing speak?

Good landing pages tell you what it is and the value proposition within seconds and I couldn’t even figure out what this thing does on the first page.

This is so incredibly over-engineered that it feels like a joke. Even a cursory glance at the examples reveal that this is simply a way to write CSS shorthand in the `class` attribute (for some reason). I understand that there are developers out there with a phobia for CSS, but we're now at the point where they've just written CSS again.

The CSS classes appear to be generated dynamically (see the codepen-like thing in "Huge performance upgrade" section) after the page load. This should be a preprocessor step instead as otherwise it's hard to see the benefit.

Don't understand why so many of these ideas keep popping up. What is so wrong about CSS that devs need to find alternatives to work around having to declare styles using the CSS language?

The most general complaint I've seen in the past is that legacy css was not able to be DRY without a preprocessor. Current css versions support some variables I believe ...

> css was not able to be DRY without a preprocessor

This is really nutty, though, considering that so many of the projects where these sorts of things find adoption are exactly the ones that are wont to inject bloated frameworks and brittle tooling into the publishing pipeline, anyway.

Stop removing semantics from markup; keep attaching real class names to things. The class attribute is about more than providing a handle for style sheets to bind to with CSS selectors.

I still don't think you can make a block or an assignment using CSS vars, i.e. the left hand side of a `property: value;` statement. Maybe I'm wrong, that would be interesting

yes you can, it's known as css custom properties

I think they're trying to say that you can't

  :root {
    --prop: color;
    --value: red;
    var(--prop): var(--value)
  }

While this is a neat idea, one immediate challenge is that this renders pages completely useless with javascript disabled. I'm far from being an anti-javascript person (I love javascript!), but this is an unfortunate side-effect that prevents some users from being able to view any content whatsoever.

I am a bit skeptic about the no css bundle advantage. What about all the bloat that is now getting added in the html ?

---

I spend 10-20% of my time writing css. I have tried pretty most of the popular css-in-js and atomic/utility css libraries but always keep going back to typestyle [1].

It may not be as succinct or as prescriptive as other solutions, but being able to write/parameterize/compose all styles in pure typescript is a big enough reduction in cognitive overhead for me to offset other advantages that these solutions offer.

[1] https://typestyle.github.io

To me, it looks a lot like TailwindCSS but with fewer constraints. I tend to appreciate Tailwind's constraints, as it makes it easier (for me) to fall into the pit-of-success when trying to design layouts with consistent padding/margins/line-heights/etc.

I think cleaning up the hyperbolic marketing language would go a long way for me in terms of taking it seriously (the entire "Why" section does not actually communicate any real information).

I didn't expect to love utility-first CSS, but I'm a Tailwind convert after using it in production apps. It's a great productivity boost, and a terrific fit for server-rendered partials and their descendants.

This client-side production of styles on page load, however, is a step too far, since it's inevitably brittle to JS issues and FOUC.

This is what I thought at first too. But this runs in javascript for some reason.

I see no reason for such a thing and the website doesn't explain why either. If you go to the Why page they're only boasting about their syntax.

Essentially they're moving the compile step of Tailwind to the browser. On each page load. For no benefit.

Exactly right - Tailwind's constraints are what differentiate it from just inline styling. I've only glanced at this landing page but from what I see, I don't understand the value proposition.

This website makes my laptops fans go crazy (on firefox).

How this is that different from inline CSS or e.g. Tailwind? How is writing CSS in the HTML a good thing?

Maybe if your site is 100% static.

My biggest concern with this is that it looks like a Tailwind copy, but doesn't mention anywhere Tailwind or how it is different/better than it.

EDIT: Also, the landing page took like 10 seconds to load, which doesn't really make me think of "high performance".

Here is the comparison with Tailwind/Windi CSS/unocss: https://github.com/master-co/styles/discussions/3#discussion...

This page took what felt like 6-7 seconds to render fully, with a slight content shift afterwards. There's also text that's slightly clipped outside viewport and can't be scrolled sideways to read.

Is this really an improvement?

Looks like their JS library is parsing the syntax within the class attribute and then applying the styles? "Virtual CSS engine" -- I guess?

Not sure about the claims re: speed:

https://github.com/master-co/styles/blob/main/src/text-rende...

It always seemed unproductive to me to write this kind of HTML: <div class="margin-top:10 padding:15">

What's the point? It looks exactly like: <div style="margin-top:10px; padding:15px">

In my opinion, using classes like that is unuseful. And it's not happening in this CSS library alone, it happens in a lot of them.

So how do you change an element style in different context, when it has hard coded utility classes?

This surely is just a persiflage, right? Right??

The page just keeps crashing on Safari.

The "Why" page is obviously not aimed at me as I don't understand a word of it: https://styles.master.co/#why

I might need a tl;dr on this whole thing. Anyone?

It's hilarious. The schema is "when you only think about X, I have already finished implementing it - that's how fast the engine is"

Reply on news.ycombinator.com