📝 CSS-Tricks 255: Thoughts on Astro

View this newsletter on the web.

[Robin]: Exciting news! This week Astro was formally introduced — it’s a static site builder that is, well, pretty gosh darn exciting:

In Astro, you compose your website using UI components from your favorite JavaScript web framework (React, Svelte, Vue, etc). Astro renders your entire site to static HTML during the build. The result is a fully static website with all JavaScript removed from the final page. No monolithic JavaScript application required, just static HTML that loads as fast as possible in the browser regardless of how many UI components you used to generate it.

The idea here is that we get all the developer benefits of those frameworks whilst not hurting the user with long page loads or bundle sizes. And this is wonderful since a lot of folks in the front-end community have long complained that these frameworks favor developers over users.

Also, it’s worth noting that this blog post is extremely quote-worthy. Here’s another snippet:

Poor performance is often framed as a failure of the developer, but we respectfully disagree. In many cases, poor performance is a failure of tooling. It should be difficult to build a slow website.

There’s a blog post somewhere out there on the information super highway (which I’ve now forgotten the link to) which happens to complement the design of HTML and how it’s a remarkable thing because it’s so very hard to get HTML wrong. And CSS, too! If you mess up a CSS rule then your website might look a bit borked but all of the content on a page is still accessible. That’s really the sign of a well-designed system: that even when it breaks, it still kinda works.

However, once you start building more complicated websites with frameworks and state and what not then the surface area for failure expands exponentially. And so on this note, I agree with the Astro folks here. There’s no reason why we can’t have a great developer experience and a wondrously fast and accessible website spit out the other end. And our tools should be well-designed systems.

So how do we go about using Astro? Well, we have to make Astro components with the .astro file format:

Think of .astro as component-oriented HTML. Components are reusable, self-contained blocks of HTML and CSS that belong together.

So we can write plain ol’ HTML and throw that in an .astro file:

<main> <h1>Hello world!</h1> </main>

That right there is a complete Astro file! These files also share the concept of Front Matter, just like in Jekyll. And that’s where you define local variables:

--- let name = 'world'; --- <main> <h1>Hello {name}!</h1> </main>

…or import other components:

--- // This area is TypeScript (and therefore JavaScript)! import MyComponent from './MyComponent.astro' --- <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <MyComponent></MyComponent> </body> </html>

There’s some tiny things I like about .astro over .jsx. Take the fact that you don’t need to wrap elements with <Fragment> or <>. That’s certainly neat.

How does all this relate to CSS though? Well, according to the docs, all styles are scoped to a component and you can then opt-in to creating global styles. So within a file called Title.astro, you could write something like this:

<style> /* Scoped class selector within the component */ h1 { font-weight: bold; } </style> <h1>I have scoped styles</h1>

And that’s it. No importing a ton of dependencies or whatever; Astro does it all for you. I also love that CSS is within the HTML but you don’t have to write weird JavaScript-esque CSS where it’s all CamalCase or any other format than regular ol’ CSS. This, to me, is a huge improvement over all CSS-in-JS things I’ve seen.

But it’s important to note that the styles above will only be applied to the <h1> in that file. If you want to use global styles then you have to opt into them, like this:

<style> :global(h1) { font-size: 32px; } </style> <h1>I have global styles</h1>

I think this is a smart move. 99% of the time I’m writing CSS I only want to style the component that I’m working on, and so this prevents accidental “leaks” into other files. However! This could easily lead to a ton of styles being made over and over again, as it does today with my experience of using emotion. No system will really save us from ourselves, sadly.

Anyway, ranting aside, I love the direction of Astro for one reason above all these niceties though and this is a completely non-scientific opinion with nothing but a ton of bias from me—but!—JavaScript frameworks always felt as if they took traditional programming and tried to shove HTML and CSS into the, end users be damned (this is an unextremely unfair opinion but it’s how they feel to me). Astro, on the other hand, seems to have learned from all those mistakes and instead takes a good look at HTML and a good look at how we’d like to build things and combines the two without sacrificing one for the other. So you want to use React components and Svelte components and then switch them out for another framework in the future? Go right ahead, Astro doesn’t care at all. It spits out HTML no matter what and then hydrates things when you need more interactivity.

I guess that’s what’s so exciting to me: the philosophy behind Astro, more so than just what it is today.

It’s a hopeful vision of a future web where we’re not limited by past technical decisions and our users aren’t harmed by our neato developer experience.

[Chris]: I am frickin’ stoked about Astro. I took an hour the other day and made a demo site. Look how silly easy it is to grab some remote data to render during the build process. Then I just barf out a quick template and it’s a JavaScript-free experience. To keep the content up-to-date, I’d just run the build like once a day or something. I’ll have to blog about it soon.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s