CSS Icon

CSS

Styling the web and views since 1996.
144 Stories
All Topics

Henrik Fricke indiepen.tech

Indiepen – a privacy-friendly solution to present your code to people

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! 👏

Shopify Engineering Icon Shopify Engineering

Shopify engineers on replacing Sass

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).

Windows win11.blueedge.me

Windows 11 in React

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!

Windows 11 in React

Una Kravets web.dev

Web design in a component-driven world

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!

Web design in a component-driven world

CSS daisyui.com

DaisyUI – component classes for Tailwind

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.

CSS web.dev

An evergreen CSS course and reference to level up your web styling expertise

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.

Ashley Kolodziej CSS-Tricks

A love letter to HTML & 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. 💚

Hidde de Vries hiddedevries.nl

Criticism pushes the web forward

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.

Adam Wathan YouTube

The next generation of Tailwind CSS

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.

Andy Bell Smashing Magazine

Things you can do with CSS today

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.

Josh Comeau joshwcomeau.com

The styled-components happy path

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 ✨

0:00 / 0:00