CSS Icon

CSS

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

Dave Rupert daverupert.com

Modern alternatives to BEM

Dave Rupert brainstorms some new CSS organization acronyms.

I’m not anti-BEM nor anti-roboclasses, but as we enter a new era for CSS I think we have an opportunity to rethink best practices around architecting CSS. Before we get lost rethinking the wheel, let’s hold on to some good principles from the past decade or so:

  • We want to author in components
  • We generally want low-specificity to avoid collisions
  • We want a bucket of global utility classes/variables for ad-hoc composition or customizations

With those principles, let’s dive into some CSS architecture alternatives.

He goes on to describe CUBE, HECS, WILS, GPC, and other systems that haven’t even been named yet 😆

HTML web.dev

A course that breaks down every aspect of modern PWA development

This course from the folks at web.dev targets beginners and advanced developers alike.

You’ll learn PWA fundamentals like the Web App Manifest, service workers, how to design with an app in mind, what’s different from a classic web app, how to use other tools to test and debug your PWA. After these fundamentals, you’ll learn about integration with the platform and operating system, how to enhance your PWA’s installation and usage experience, and how to offer an offline experience.

The Changelog The Changelog #500

The legacy of CSS-Tricks

Episode 500!!! And it has been a journey! Nearly 13 years ago we started this podcast and as of today (this episode) we’ve officially shipped our 500th episode. As a companion to this episode, Jerod and Adam shipped a special Backstage episode where they reflect on 500 episodes. And…not only has it been a journey for us, but it’s also been a journey for our good friend Chris Coyier and CSS-Tricks — which he grew from his personal blog to a massively popular contributor driven model, complete with an editor-in-chief, a wide array of influential contributors, and advertisers to help fund the way. The news, of course, is that CSS-Tricks was recently acquired by DigitalOcean in March of 2022. We get into all the details of this deal, his journey, and the legacy of CSS-Tricks.

Robb Owen robbowen.digital

Holograms, light-leaks and how to build CSS-only shaders

Robb Owen:

Why let JS have all the fun? With mix-blend-mode finally gaining wide browser-support, we now have access to many of most common shading techniques in CSS. With some choice images and a bit of careful layering it’s possible to build some surprisingly high-quality effects without the need for introducing any JS dependencies.

If you’ve ever used Photoshop’s Blend Modes… you can basically do that in CSS now. So cool! Check out Robb’s entire article. He includes a lot of great examples.

Chris Coyier CSS-Tricks

CSS-Tricks is joining DigitalOcean

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

CSS github.com

A collection of class-less CSS styles to make simple websites look better

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.

CSS leemeichin.com

Yes, I can connect to a DB in CSS

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 csstracking.dev

CSS fingerprinting

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 joshwcomeau.com

A modern CSS reset

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.

Django saaspegasus.com

Modern websites, JavaScript optional (Django + HTMX + Alpine)

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 ericwbailey.design

Your CSS is an interface

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 JS Party #200

Best of the fest! Volume 1

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

0:00 / 0:00