[HN Gopher] Master Styles - The First Virtual CSS Engine
___________________________________________________________________
Master Styles - The First Virtual CSS Engine
Author : skilled
Score : 18 points
Date : 2022-03-24 20:10 UTC (2 hours ago)
(HTM) web link (styles.master.co)
(TXT) w3m dump (styles.master.co)
| [deleted]
| lf-non wrote:
| 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
| aarpmcgee wrote:
| 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).
| atombum wrote:
| 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.
| elhesuu wrote:
| 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?
| tenken wrote:
| 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 ...
| nawgz wrote:
| 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
| royal_ts wrote:
| yes you can, it's known as css custom properties
| rado wrote:
| So how do you change an element style in different context, when
| it has hard coded utility classes?
| b1n wrote:
| This website makes my laptops fans go crazy (on firefox).
| jer0me wrote:
| 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.
| WhitneyLand wrote:
| 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.
| ctvo wrote:
| 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...
| pastrami_panda wrote:
| 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?
| dinkleberg wrote:
| 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.
| Fauntleroy wrote:
| 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.
| kreetx wrote:
| 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.
| cookiengineer wrote:
| > "virtual css"
|
| > uses function() as class attributes
|
| > uses even selectors in class attributes
|
| > uses @ for references to emulate inheritance
|
| > claims to be super tiny and efficient
|
| > mobile site is completely broken
|
| > mobile site almost crashed my browser
|
| Yeah, no thanks.
|
| I'd recommend to evaluate what you can do marketing with. It's
| definitely not performance, and not being better/more efficient
| than CSS.
|
| This seems to be an invention of somebody that doesn't know
| anything about modern CSS features, like CSS vars, @supports,
| nested blocks etc...
|
| I mean, is this a joke from a PHP dev? I can't tell, honestly.
|
| Anybody with JS experience would've created custom elements with
| custom attributes, or at least used the data-attributes for
| this...I mean...wtf, this is even invalid HTML.
|
| If I was concerned about CSS filesize and not about HTML
| filesize, I could've used style attributes instead. If my HTML is
| twice the size in your "virtual" language...then what's the point
| of using it again, compared to a transpiler approach like
| postcss, less and others?
___________________________________________________________________
(page generated 2022-03-24 23:01 UTC)