Assembler CSS, a modern utility-first framework | Hacker News Reader

Assembler CSS, a modern utility-first framework

asmcss.com

34 pointsmsarca45 comments

  x-style="max-w:80; mx:auto; radius:md; e:2; e.hover:4; transition:all 0.25s; cursor:pointer"

How many times do we have to be told they're not reinventing the wheel while reinventing the wheel! This is not better than just writing CSS.

'Proxy' DSLs are not a solution to anything other than "how to do I make sure the next person taking on this codebase will want to delete all my shit and start again clean and coherent"

If you're at the point where you're getting people to write the style attribute in your own DSL so you can claim some marginal utility gains then you're missing the point of what makes CSS difficult for coders to deal with: how do you describe visual complexity in code. How does x-style="e:2;" solve a problem that the 'contract' between designer and developer has?

Interestingly enough, the syntax of this reinvented CSS reminds me of an old style sheet language proposal created by Bert Bos in March 1995 [0]:

``` […] id: !ID language: !LANG *target: !ID

! Create a default margin of 3 em ! HTML.leftindent: 3.0 HTML.justify: full […] ```

[0]: https://www.wiumlie.no/2006/phd/archive/odur.let.rug.nl/~ber...

My first impression is it's kind of like a transpiler or Babel for CSS. I agree with your sentiment and I wouldn't use it, but let others have their fun I guess.

> let others have their fun

We can't afford this attitude unfortunately, these people don't work in a bubble, teammates have to clean up after them and gullible people in the industry are lured into it.

There is a domino effect and next thing you know it is actually now the norm to write styles like this, started way back with bootstrap.

Then actually knowing how to use real CSS becomes a competitive advantage.

They reinvent inline styles, then they reinvent classes! It's kind of impressive.

I read through the docs, trying to find a value proposition to this over CSS. So far, the benefits claimed amount to "knowing how to use development tools is scary", "you can abbreviate properties into incomprehensibility", "here are some new values and defaults to keep straight".

In terms of what you can't do with plain old inline CSS? Apparently, just some parlor tricks like styling sub-elements (with a cumbersome syntax) and some concise transitions.

> In terms of what you can't do with plain old inline CSS?

AFAIK you cannot do responsive stuff (media queries) in the style attribute.

I don't see than you can really work with arbitrary media queries in this, either. There are just some combinations of widths and orientations baked in, which is nothing new.

You're right that you still cannot do arbitrary media queries there. But from my experience (I'm not a designer though), staying within a set of predefined breakpoints (xs, sm, md, lg, xl) is often enough for most web pages.

The style attribute doesn't allow you to do anything responsive at all on the other hand.

That's what classes are for. (Which this also reinvents.)

In defence of Tailwind: https://news.ycombinator.com/item?id=27763835

But Assembler CSS looks like an overly elaborate joke

Assembler CSS doesn't look very good and I wouldn't use it ... but I have come to absolutely love utility CSS through Tailwind. Tailwind's documentation does a good job explaining why: https://tailwindcss.com/docs/utility-first

It's really not very similar to writing inline styles, nor is it about saving keystrokes. It's about very quickly and confidently translating a design in your mocks (or your head) into working CSS which draws from a finite design system that you control.

It't not something I'd use on mywebsite.com/about.html but it pairs really nicely with modern JS frameworks which allow you to create custom elements with scoped styles.

From https://asmcss.com/docs/1.x/

    <body>
    <!-- Your code here -->
    <div x-style="max-w:80; mx:auto; radius:md; e:2; e.hover:4; transition:all 0.25s; cursor:pointer">
        <img x-style="block; max-w:100%; w:100%; h:auto; radius-top:md" src="...">
        <div x-style="p:4">
            <div x-style="text:lg; color:black; font-weight:700">Fresh veggies</div>
            <div x-style="text:sm; color:silver; font-weight:400">600g</div>
            <p x-style="pt:4">
                Any veggie can belong on your menu, so choose what you love and use the rest
                for future meals and snacks you can enjoy in flavorful ways.
            </p>
        </div>
    </div>
    </body>

A brilliant parody. Full marks.

> A brilliant parody. Full marks.

I sincerely hope you are right.

Unfortunately it doesn't appear to be a parody -- some of their company's product pages actually use it.

Reading the docs, the talk of "other CSS frameworks" seems to be primarily aimed at Tailwind; but fails to discuss the trade-offs.

The key design difference seems to be to use a runtime script and data/x attributes to allow customisation and perform style pruning, rather than using config files and build scripts. There are clear downsides to this (as well as upsides, such as faster ramp-up time), but they're not really being presented honestly.

From my perspective, it's hard to imagine someone adopting this as core tech for _websites_, because requiring a blocking script before any styles can load is an absolute deal-breaker for me. But perhaps people will find some utility from it for prototypes, and in environments (perhaps electron apps) which are less sensitive to blocking scripts.

I think modern Tailwind supports runtime generation.

Yeah, but using a JIT build tool, rather than a script tag. In production you'd still do the static build rather than using the JIT though.

It sure does in the more recent versions!

From the front page:

> We've decided to develop Assembler CSS as a reaction to the current state of the ecosystem, not just as a solution to our company's needs.

I cannot comment on the company’s internal needs but, to be honest, I would consider the need to reinvent the wheel with custom attributes for styling to be one of the problems with today’s JavaScript ecosystem. And having a styling framework that only works with JavaScript turned on seems like a bad idea, even for single page applications.

I thought it was a parody but now I'm not so sure. If that sounds harsh it's because I'm struggling to understand the value proposition or what problem it solves exactly.

Am I right in that it requires runtime js to parse it's special style tags in order for any css to work?

This gets more and more baffling. Everyday another totally useless framework gets released – and they never tell you what usecase this shit has. Seriously, what problem is solved by this?

What is wrong by just writing VanillaCSS? This is becoming ridiculous.

Having used a couple of these frameworks (emotion and tailwind mostly), I can attest that there are significant issues with vanilla css at scale. I wouldn't dream of going back. That being said, I agree, the volume and wheel reinvention is getting ridiculous.

  Marius Sarca, ASM CSS
  Sarca, ASM CSS
  Sarca, ASM
  Sarcasm?

You want me to include a Javascript file to style my website and you use the non standard `x-style` attribute. I think i will pass and write vanilla CSS or something that compiles down to it.

I'm not sure why utility frameworks are so popular. It seems like Sass solves most of the problems of vanilla CSS. Writing Sass is not only quicker and more powerful than regular CSS, but you can also create your own utility classes very easily with loops.

Moving CSS into HTML does not makes much sense either, as it's far stylistically cleaner to separate CSS and HTML into their respective files.

Plus, if you have two elements with the same or similar styling, re-writing all those utility classes over and over seems extremely cumbersome. Why not just write the class name and use it everywhere it needs to be used? .button or .button-primary is far simpler than writing out inline CSS over and over again.

> Plus, if you have two elements with the same or similar styling, re-writing all those utility classes over and over seems extremely cumbersome

Tailwind doesn't really work that well on static websites, or apps that have markup that you have to repeat all over. It is supposed to be used with components.

If you have a button, it should be its own component, rather than something that you have to copy-paste around.

Of course, you can use @apply to merge Tailwind classes into CSS Components, but it kinda negates the benefits of functional CSS.

> Moving CSS into HTML does not makes much sense either, as it's far stylistically cleaner to separate CSS and HTML into their respective files.

The "separation of concerns" idea is still here, but the idea is that HTML+JS is the "presentation", while the "content" comes in the form of JSON (or any kind of object, if you're using it in the backend).

Without this conceptual shift, it really doesn't make sense to use Tailwind.

The mark of excellent satire is that it's indistinguishable from the thing it lampoons.

10/10.

At first I thought this was a joke, but someone spent months and months working on this: https://github.com/asmcss/assembler/graphs/commit-activity

Or "how we managed to re-use inline style for html elements AND add javascript overhead on top of it instead of letting the browser do it's stuff".

Bonus: MDN about inline css:

> Tip: An inline style loses many of the advantages of a style sheet (by mixing content with presentation). Use this method sparingly.

in general don't disagree with this, but html as content is an outdated view. Markup IS presentation, content is the data in your CMS

I think the approach is noble but by looking at their own website, just the H1 has this:

> <h1 x-style="mt:0; mb:8px; font-size:2.5rem; md|font-size:3.5rem; line-height:1.25; color:white;" style="--asm-margin-top:calc(0 * var(--unit-size)); --asm-margin-bottom:8px; --asm-font-size:2.5rem; --asm-md--font-size:3.5rem; --asm-line-height:1.25; --asm-color:white;" class="asm#c871 asm#c23e asm#822f asm#825d asm#b9fa asm#6330">Just-in-time CSS, unlimited possibilities</h1>

I think that is spaghetti code. I can do that with my own library and much cleaner functional approach, and much reduced code https://github.com/meerita/utilcss

This is ridiculous. I personally want a higher level of abstraction and not worry about different border radius styles. I want components with minimal syntax like bootstrap or w3css.

There is also WindiCSS - a superset of Tailwind with some very cool features.

https://windicss.org/

The example on that site of the gradient button with "Preview" text is broken. The text isn't centered because the container is set to display: flex but no flex-grow set to expand the content box to fill the parent. It has text-center set, but because the box is collapsing that's not working as expected. Really, it needs Tailwind's justify-items-center applied to it.

I'd worry about using a framework whose primary example is wrong.

+1. Been using this in place of Tailwind. I like that it's got 0deps and only takes up 2MB of disk space.

Maybe I'm just too traditional here, but I simply don't see the real advantages of any of the CSS-in-JS solutions. I like CSS modules, but anything fancier seems to add more problems than it helps to me.

This one seems even more extreme than many others and looks pretty much like writing inline CSS for everything.

So now my page styles are a security exploit vector too?

I think a comparison to Tailwind would be helpful, since it seems to target a similar audience.

< insert the office gif here > No! God! Please! No!

-------

Even worse this runs on the client and is transformed from js back to css.

How is this even helpful? Why not use inline style directly then? What do I miss?

What does modern mean in this context?

Another one of these things that make it easy for backend devs to produce garbage unmaintainable styles, of course this is popular.

Assembler CSS is built on top of Constructable Stylesheets because we believe there is value in this technology. If you haven't heard about constructable stylesheets, here is a link https://dev.to/westbrook/why-would-anyone-use-constructible-... to a short article. If interested, you can find many more with a simple search on Google. When people read about constructable stylesheets, they are like, "Wait, whaaaaat? Constructable Stylesheets is about using JavaScript to generate CSS?". Yeah, dude, welcome to the 21st century! Try not to make a heart attack over this.

Using Javascript on the back-end to build stylesheets based on tags actually used might make some sense, but client side? That's just dumb. There's so many ways that can go wrong.

These guys seem to be trolling the entire ecosystem.

Reply on news.ycombinator.com