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?
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.
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.
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.
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.
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.
<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>
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.
> 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.
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.
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.
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.
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.
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.
'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?