Search

I think there's some real merit to Andy's ideas behind Cube CSS. It's a middle-ground between everything-in-JS or BEM that throw out the cascade entirely and the free-for-all that can happen if you …

An in-progress project looking to create a CSS reset that creates modern defaults, rather than just focusing on standardising behaviour across browsers or removing irritating legacy features in …

A bespoke stylesheet that automatically styles semantic HTML to look like …

An intriguing new project from some of the brains at ClearLeft for "elegantly scaling type" on the web. Personally, I'm all for anything that reduces or removes the need for breakpoints in my …

I know very little about Edward Tufte, but they clearly have quite the following in the design/typography space. Tufte CSS is a project aiming to emulate various tenets that Tufte used to …

Carousels are the devil's work, but they remain incredibly useful and popular UI elements 😑 Having a solid implementation that will work without JavaScript, making it more lightweight and …

Looks like the new CSS @property extension has landed in Chrome. Una has put together some interesting examples and explanations on the fallback mechanism in particular. Usage appears to be the same …

I don't think I've come across a clearer explanation of the full cascade before, nor one so beautifully crafted. An excellent resource and …

It's fun to see which technical decisions the CSS working group officially consider "mistakes" 😂 I agree with most, though not sure how I feel about the counter-clockwise directional shorthand …

An excellent overview of (most of) the unit options you can use in CSS Grid columns and rows, with examples. (No …

I have a vague memory of CSS Regions being talked about, but had completely forgotten them. It turns out that's likely because the spec has effectively been pulled. I think it's technically still out …

Andy always has some interesting thoughts about CSS, and this reset is no exception. Lots of interesting things here that fit very nicely with both my own experience and other resets that I've …

Josh has added some additional thoughts to Andy's CSS reset. Personally, I like a combination of the two (with a dash of Stephanie's best practices thrown in for good measure), but wanted to capture …

Using pseudo-selectors like :where and :not to invert style rules, allowing for better code encapsulation and context sharing across a codebase.

A very neat little trick. Embedding @keyframes within your SVG <style> element makes it animate when it loads, whether rendered as an image or a background (or, I assume, inlined). It can even …

When Eric first tweeted about the new design on his site, I thought something a bit unusual was going on with the CSS layout. I actually dove straight into the source that day and learnt a little …

A clever UX idea discovered on Pink News: each paragraph of text has a different highlight colour, so as you select parts of an article to copy elsewhere it reveals the LGBTQA+ flag. They're using …

A simple and informative example of how the new CSS clamp property can be used to create fluid layouts (in this case, specifically a fluid type …

As acerbic and cutting a critique of utility-first CSS (and that particular framework) as you would expect from Heydon, but hidden amongst the humour are some (also equally expected) jewels …

Josh breaks down why and how you can use CSS variables more easily in React, specifically using styled-components. Honestly it feels a little terrifying how much is needed just to get basic …

I am not a fan of alphabetical CSS, but Eric does a really solid job of arguing why, right now, it may be the best option. The short version is that CSS remains so woefully underutilised and …

One of the core downsides to CSS-in-JS is that you have to compile it on the client, which means increased bundle sizes and slower rendering. Linaria is an attempt to fix that, by providing all of …

If you're new to (or unsure of) CSS transforms at all, I can't think of a better explanatory introduction than …

A selection of possible workarounds for animating CSS values with auto keywords (e.g. height, width, etc.). Not a huge fan of the Flexbox option, but the max-height trick is a very useful one to …

It will (hopefully) come as no surprise that I found myself nodding vigorously throughout this excellent article by Elaina, which shines a light on some of the reasons that CSS tooling can leave a …

More than 700 web icons made entirely in CSS from a single <div> (SVG versions are also present). Very useful and great …

CSS variables (aka CSS custom properties) do not have access to the cascade. That means they can't fall back to earlier rules, so if your variable is invalid, the browser will simply unset …

I ran into a bug recently where some SVGs on a website were seemingly ignoring a fill request. A quick check in dev tools showed that the CSS was being applied so... what gives? Turns out …

An interesting look at whether the current mobile-first paradigm is problematic. Ultimately, the title feels a little like click-bait; to me the solution proposed remains mobile-first, but suggests …

A super useful recap of the main ways that CSS calculates percentage for element layout, each with a brilliant slider-based demo. The …