And if you like Alpine, there’s a companion collection of snippets that you can copy/paste into your project.

Jen Looper from Web Dev for Beginners and Front-end Foxes joins Jerod and Ali to discuss the exciting (but also intimidating) prospect of getting in to web development in 2022! Where should you start? What technologies should you focus on? Is it better to go all-in on a framework or stick with the fundamentals? Stuff like that!

CSS co-designer Steven Pemberton, on Twitter:

!important was added for one reason only: laws in the US that require certain text to be in a given font-size. !important stops the cascade from changing it.

Anything else is probably misuse, and a sign you may not understand the cascade properly.

Chris does a great job answering what will surely be the most common question about this acquisition in his announcement post:

1. What happens to CSS-Tricks?
2. Will you still be running CSS-Tricks?
3. Why now?

The amount of value this team has given to the web world over the years is immeasurable.

I sincerely hope DigitalOcean turns out to be a worthy new steward of this precious resource and the site’s best years are ahead of it. 🤞

Almond.CSS helps in two ways: it normalizes the CSS styles to provide similar experience cross-browser, and it spices things a little by adding custom styles (that can be personalized!)

Use the different HTML5 semantic tags on your website, include the library in your project, and let CSS and the browser work their magic. Just combine your HTML and Almond CSS (no JavaScript needed.)

Demo here. Looks like a great starter for simple side projects and the like.

Jim Nielsen:

It’s easy, in hindsight, to critique things CSS got wrong or should’ve prioritized differently. But I want to take a moment to marvel at the things they got right.

It’s incredibly difficult to build APIs that solve today’s problems while anticipating an unknown future. In some cases, I think the original CSS authors did precisely that.

Anybody who’s had to design/implement HTML emails knows how utterly painful it is. With Mailwind you get to do it the same way you’d build a site with Tailwind and then run:

mailwind --input-html email.html --output-css style.css
# or for inline styles
mailwind --input-html email.html --output-html email-inlined.html

And you’re off to the outbox! 📤

Just wow. This is an impressively hacky hack. You’re probably wondering how? As many such things do, it all starts with a new (Chrome-only) API:

A new set of APIs affectionately known as Houdini give your browser the power to control CSS via its own Object Model in Javascript. In English, this means that you can make custom CSS styles, add custom properties, and so on…

And it ends with something that looks like this:

main {
  // ...
  --sql-query: SELECT name FROM test;
}

Oliver Brotchie developed this CSS fingerprinting technique that requires no Javascript or Cookies to function and avoids anti-tracking methods such as NoScript, VPNs or browser extensions.

CSS Fingerprinting is a technique of tracking and gathering information on site visitors. This method exploits the nature of CSS to track various characteristics about the visitor’s browser and device, which can later be used to either identify or track said visitor.

Right now, at current spec, this method doesn’t scale, but with the next upcoming draft of the CSS specification, CSS Values 4, it will become far more scalable and precise.

Josh Comeau:

Recently, I’ve been using my own custom CSS reset. It includes all of the little tricks I’ve discovered to improve both the user experience and the CSS authoring experience.

Like other CSS resets, it’s unopinionated when it comes to design / cosmetics. You can use this reset for any project, no matter the aesthetic you’re going for.

In this tutorial, we’ll go on a tour of my custom CSS reset. We’ll dig into each rule, and you’ll learn what it does and why you might want to use it!

It has 9 rules and unlike previous resets, the goal is not to create a ‘blank slate’ that is uniform across browsers. Josh walks/talks you through each rule and why they made the cut.

Building a modern front end in Django without reaching for a full-blown JavaScript framework. Choosing the right tools for the job, and bringing them into your project.

This is as close to a tutorial as you’ll see on Changelog News. I’m linking to it not for the step-by-step bits like talking to your “Django backend without a full-page reload”, but for the decision making bits like “when you might choose low-JavaScript.”

Eric Bailey’s take on CSS is certainly counter to the direction most are headed:

Human-friendly CSS is an interface that prioritizes people. It allows someone using your website or web app to easily make modifications to get what they need. This is huge because we can’t know who the person is, or what circumstances they’re experiencing.

Humans reading/modifying your CSS may seem like an edge case, but it’s more common than you think:

Stylus on the Chrome Web Store has more than half a million users. Stylish has over three million. That’s a lot of people modifying the web to get what they want.

He goes on to point out that even if it weren’t that many people, it’s still worth considering for other reasons. Lots to ponder.

JS Party listeners and panelists celebrate our favorite moments from the past 100 episodes! You’ll hear from over 20 of your favorite voices across 14 episodes. We also share some behind-the-scenes and read/hear from listeners! Here’s to the last 200 episodes, and the next 200 as well. 🥂

Your <head> is the single biggest render-blocking part of your page—ensuring it is well-formed is critical. ct.css is a diagnostic CSS snippet that exposes potential performance issues in your page’s <head> tags.

Smashing Mag always delivers on these epic reference-style posts packed with knowledge:

Writing CSS has probably never been more fun and exciting than it is today. In this post we’ll take a look at common problems and use cases we all have to face in our work and how to solve them with modern CSS.

Muffin fairies, thumb wars, and fruit transit can only mean one thing: Explain it Like I’m 5! We’re also covering the news, discussing the effects of remote work, and agreeing it’s OK to ignore the frontend dev scene for awhile.

Chris Coyier on some of the new(ish) CSS compilers (such as Assembler) and how they’re flipping the script:

The popular Tailwind framework supports it. It kind of flips the mental model of Tailwind on its head, to me. Rather than providing a huge pile of CSS utility classes to use — then “purging” what is unused — it only creates what it needs to begin with.

JavaScript-free and built (poetically) on top of XP.css (whence Longhorn Vista?)

Alex Page & Sam Rose from Shopify’s Polaris team join Jerod & Divya to discuss their open research into finding and selecting a viable alternative for Sass at the company. Six solutions enter, but which one will walk away with the 🌹?

Henrik Fricke:

Indiepen lets you embed HTML, CSS, and JS code examples on a website. We built it because we wanted to embed code examples on our blog, but many existing solutions set cookies, have a ton of features or just come with a bad performance.

😎 No cookies, no tracking, no external requests
⚡️ Small footprint with less than 20 KB
❤️ Features built for everyone

Congrats, Henrik, on shipping your first open source project! 👏

I love how Shopify’s Polaris team researched their options on replacing Sass in the open:

The Polaris team is exploring alternatives to Sass that better serve our current needs from CSS. Stay tuned for a follow up on our explorations and learning.

In the meantime, we want to know your thoughts on removing Sass! Join the conversation in the comments below..

The comment thread that follows details the pros and cons of many replacement options including Tailwind, CSS Modules, and vanilla-extract (which they ultimately decided on).

This open source project is made in the hope to replicate the Windows 11 desktop experience on web, using standard web technologies like React, CSS (SCSS), and JS.

The project description says “in React”, but the source code is comprised of 93.5% CSS. I love this portion of the README that addresses why the author built it (I assume they get this question a lot).

WHY NOT? Why not just waste a week of your life creating a react project just to coverup your insecurities of how incompetent you are. Just Why not!

Responsive design is evolving. Una Kravets:

Today, when using the term: “responsive design”, you are most likely thinking about using media queries to change layout when resizing a design from mobile size, to tablet size, through to desktop size.

But soon, this perception of responsive design may be considered as outdated as using tables for page layout.

“Responsive” used to mean a web design would respond based on the size of the device accessing it. In the not-so-distant future, it will mean a web design responds to the preferences of the person, the container its placed in, and to the many form factors (including folding screens) it encounters. Exciting times!

When we had Adam Wathan on JS Party, I asked him if anybody besides the Tailwind team were working on component libraries. He said yes, but didn’t name any off the top of his head. Well, add DaisyUI to the list.

Your HTML doesn’t need to be messy. DaisyUI adds component classes to Tailwind CSS. Classes like btn, card, etc… No need to deal with hundreds of utility classes.

No script dependencies. 2KB gzipped. Worth a look.

This is the resource that Una Kravets said we’d put in the show notes on JS Party #176. I thought it was worth a direct linking in News as well, since it’s so freakin’ well-done and useful:

You’ll learn CSS fundamentals like the box model, cascade and specificity, flexbox, grid and z-index. And, along with these fundamentals, you’ll learn about functions, color types, gradients, logical properties and inheritance to make you a well-rounded front-end developer, ready to take on any user interface.