Global and Component Style Settings with CSS Variables — Sara Soueidan

Sara shares how she programmes with custom properties in CSS. It sounds like her sensible approach aligns quite nicely with Andy’s CUBE CSS methodology.

Oh, and she’s using Fractal to organise her components:

I’ve been using Fractal for a couple of years now. I chose it over other pattern library tools because it fit my needs perfectly — I wanted a tool that was unopinionated and flexible enough to allow me to set up and structure my project the way I wanted to. Fractal fit the description perfectly because it is agnostic as to the way I develop or the tools I use.

Global and Component Style Settings with CSS Variables — Sara Soueidan

Tagged with

Related links

Lowering the specificity of multiple rules at once - Manuel Matuzovic

This is clever, and seems obvious in hindsight: use an anonymous @layer for your CSS reset rules!

Tagged with

Web development tip: disable pointer events on link images

Here’s a little snippet of CSS that solves a problem I’ve never considered:

The problem is that Live Text, “Select text in images to copy or take action,” is enabled by default on iOS devices (Settings → General → Language & Region), which can interfere with the contextual menu in Safari. Pressing down on the above link may select the text inside the image instead of selecting the link URL.

Tagged with

CSS-in-JS: The Great Betrayal of Frontend Sanity - The New Stack

This is a spot-on analysis of how CSS-in-JS failed to deliver on any of its promises:

CSS-in-JS was born out of good intentions — modularity, predictability and componentization. But what we got was complexity disguised as progress.

Tagged with

Responsive Letter Spacing – Cloud Four

Another clever use of clamp() and calc() for web typography, but this time it’s adjusting letter-spacing.

Tagged with

Write Code That Runs in the Browser, or Write Code the Browser Runs - Jim Nielsen’s Blog

So instead of asking yourself, “How can I write code that does what I want?” Consider asking yourself, “Can I write code that ties together things the browser already does to accomplish what I want (or close enough to it)?”

Tagged with

Related posts

Making the website for Research By The Sea

Having fun with view transitions and scroll-driven animations.

Schooltijd

Going back to school in Amsterdam.

Assumption

Separate your concerns.

Culture and style

Styling a document about The Culture novels of Iain M Banks.

Alternative stylesheets

Why do browsers that don’t implement stylesheet switching still download alternative stylesheets?