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.

This week Emma and Adam are joined by Una Kravets to discuss difficult parts of CSS.

Ashley Kolodziej speaking directly to HTML:

You are the foundation of the Internet. You are the bridge between humans and information. When we say HTML isn’t an expertise in and of itself, when we take you for granted, we leave behind the people and systems who access that information using web crawlers and accessibility technology.

and CSS:

There is a time and place for specificity, and I cherish your ability to manage that. I love your system of overrides, of thinking ahead to what should and shouldn’t be modifiable by another developer easily. I find the appreciation of specificity and !important and contrast and all the beautiful little things you do well increasingly lost in the pursuit of the newest and shiniest frameworks.

A lovely love letter to two of my favorite technologies. 💚

Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

First-class theming, framework agnostic, and type-safety so you can cow[boy|girl] code those styles and let your tooling catch typos and variable name changes.

Hidde de Vries takes a strong, reasoned stance to online criticism of others’ work:

This week, a friend shared a blog post that critiqued a popular framework for CSS. Twitter started to discuss if it’s okay to criticise tools. In this post, I’ll say it is not just okay, it is also important.

This is a tough subject because we identify so closely with the things we create (our code), but Hidde is right: if we want to progress as an industry (and individually) we need to be able to criticize (constructively) and receive criticism. It’s part of the process.

We should give feedback respectfully and constructively, but we should give feedback. And open up to feedback, not demand it to go away. It may not be easy, but it is important to include perspectives outside your own.

Marko Denic shared 10 or so very interesting CSS tips (and tricks) in this post with Codepen examples to play with. There were a few I hadn’t heard of, which is awesome.

Visualization help end-users understand data. Charts.css help frontend developers turn data into beautiful charts and graphs using simple CSS classes.

Utility classes are so hot right now.

Turns out that question depends on your answer to another question: Percent of what? Amelia Wattenberg (whom you may remember from JS Party #113) breaks it down in great detail for us in this post.

Adam Wathan reveals Tailwind’s new JIT compiler:

One of the hardest constraints we’ve had to deal with as we’ve improved Tailwind CSS over the years is the generated file size in development. With enough customizations to your config file, the generated CSS can reach 10mb or more, and there’s only so much CSS that build tools and even the browser itself will comfortably tolerate.

Today I’m super excited to share a new project we’ve been working on that makes this constraint a thing of the past: a just-in-time compiler for Tailwind CSS.

The wonderful folks behind CSS-Tricks (maybe you’ve heard of it?) face off in our much beloved don’t-call-it-jeopardy game show. Can you out smart our intrepid contestants?

Play along while you listen (or watch). It’s JS Danger time, y’all!

Erik Kennedy’s Gradient Generator is full-featured and (of course) he teaches you how to design “beautiful, butter-smooth” gradients on the same page.

The TL;DR answer is yes (when it comes to layouts), but the full answer is longer, more annoying, and well-explained in this post by Robin Rendle for CSS-Tricks.

Our debate format returns! Divya & Feross take the “Nope” side while Amal & Nick represent the “Yep”s. Whose side will you take?

If you want to learn about CSS transitions, this explainer from Josh Comeau is a great start.

This tutorial is meant to be accessible to developers of all experience levels. It can be thought of as “CSS transitions 101”. That said, I’ve sprinkled in some interesting and obscure tidbits — no matter your experience level, I bet you’ll learn something!

Andy Bell writing for Smashing Mag:

The present and future of CSS are very bright indeed and if you take a pragmatic, progressive approach to your CSS, then things will continue to get better and better on your projects, too. In this article, we’ll look into masonry layout, :is selector, clamp(), ch and ex units, updated text decoration, and a few other useful CSS properties.

KBall hangs with Nick and Jerod to analyze and discuss the trends of the web world according to the latest State of CSS and State of JS survey results.

This is Josh Comeau’s personal suite of “best practices.”

If you work with styled-components, or a similar tool like Emotion, my hope is that this article will help you get the most out of it. I’ve distilled years of experimentation and practice into a few practical tips and techniques. If you apply these ideas, I genuinely believe you’ll be a happier CSS developer ✨