Team Management

From BEM to BE.M — A CSS Naming Convention Built for Component Libraries

Originally published on LinkedIn . I'm gradually migrating my LinkedIn articles over to DEV — this is the first one. BEM was designed for page-level…

Respect reduced motion (Web HIG tip #9)

A slide-in panel looks smooth to most people. For someone with a vestibular disorder, it can bring on dizziness or nausea. Their OS already has a "R…

Theming a Drop-In UI Kit Without Forcing a Fork

Theming a Drop-In UI Kit Without Forcing a Fork Every prebuilt UI component library eventually meets a design system it was not built for. At that p…

Application CSS must not use transition: all (Web HIG tip #6)

transition: all looks convenient until a new property starts animating and the UI jumps in ways you never meant. Web HIG tip #6 (Quick #85, HIG-MOT-…

Stop Using So Many Media Queries! Use clamp() Instead!

Learn how senior frontend engineers eliminate breakpoint bloat and build fluid, production-grade UIs using native CSS math: clamp(), min(), and max(…

Why AI coding assistants write clean-looking CSS that breaks in production (and how to fix it)

If you use Cursor, Claude, or Copilot for frontend work, you already know the feeling. You prompt the model to generate a dashboard card or a modal…

A CSS triangle vanished, because one selector matched by substring

Our stylesheet contains this: [ class *= 'bg-card' ] { border : none !important ; border-width : 0 !important ; } Cards are borderless by design, an…

CSS-Tricks could be a co-op

Stop Debouncing Resize. The Browser Already Watches It.

Your dashboard has a sidebar that collapses into icons under 900px. Someone on the team drags the browser window slowly from a wide monitor to a nar…

Building web-tui-kit: a framework-independent browser UI with a stable contract

Building web-tui-kit: a framework-independent browser UI with a stable contract I recently open-sourced web-tui-kit , a browser UI design system ins…

I built a sub-4ms JIT CSS framework with native Glassmorphism and built-in LLM training files

I built a sub-4ms JIT CSS framework with native Glassmorphism and built-in LLM training files If you've been doing frontend development lately, you…

Email Signature Generator CSS icons

Back in 2017, I was experimenting with something that was pretty fun for the CSS we had at the time — building icons without using images. Using mai…

How to Inject UI Into Any Website With a Chrome Extension

Injecting UI into a page you don't control is one of the most powerful things a Chrome extension can do. It is also one of the most fragile — platfo…

La Liga's Web Accessibility Table: How Do Clubs Actually Score?

I should start by saying that I'm not a web accessibility expert. I work in web development and deal with accessibility features regularly, but I've…

Introducing TaxUI: A Modern Declarative HTML & CSS Framework with Zero JavaScript

Hey fellow developers! 👋 Like many of you, I've spent countless hours configuring build tools, writing endless strings of utility classes, or import…

Why I Built Coordiation CSS for Humans and AI Agents

Hello DEV community! 👋 For my first post, I want to share why I started building Coordiation CSS , an independent utility first CSS compiler focused…

Building Fluentic Style: Styling DOM You Do Not Own With `createSheet`

This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluenti…

The outline: none Debate Has Been Over Since 2020

A design review flags it every time: a button gets clicked, and a chunky blue ring slaps itself around the edge for half a second. "Can we remove th…

Your Grid Has Invisible Columns: auto-fill vs auto-fit

You wire up a card grid with the one-liner everyone reaches for: .cards { display : grid ; grid-template-columns : repeat ( auto-fill , minmax ( 240…

Building Better Property Platforms: 5 UX Details That Matter

Property platforms often serve two very different types of users. One person wants to find a home. Another wants to publish a property and find the…

3 Free CSS Generators That'll Save You From Fighting box-shadow, gradient, and border-radius Syntax

If you've ever spent 20 minutes nudging box-shadow offsets, or hand-writing a linear-gradient() only to get the angle wrong three times in a row, yo…

Building Fluentic Style: Rethinking How Outside Styles Reach Inside Components

This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluenti…

Why Browser Games That Look Offline Still Need an Internet Connection

Some browser games feel almost offline. They start quickly, use simple controls, and may continue running even when the network becomes unstable for…

The CSS Problem Nobody Thinks Is Solvable

James Coombs is a design engineer who migrated a large frontend from Material UI to a custom design system (Radix, Tailwind). Four CSS systems had t…

No Passport Required — Comfort Food Around the World

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art . Inspiration Comfort food does not need a passport. Everywhere in the w…

La Abuela — Comfort Food from Madrid

La Abuela — Comfort Food from Madrid 🍲 A cozy, fully accessible landing page for an imaginary family restaurant in Madrid, built from scratch with v…

Why Every Large Stylesheet Eventually Becomes Unpredictable

Also available in Español The Problem Every team inherits a stylesheet like this eventually. Not badly written. Nobody on the original team was care…

The SVG Color Cascade Nobody Explains (fill, stroke, currentColor, and why img src breaks it)

Change an SVG's color by editing fill and stroke , either as attributes or through CSS. Simple in theory. In practice there are three places a color…

How SVG-to-PNG Conversion Actually Works in the Browser

If you've ever tried to convert an SVG to a PNG entirely in the browser (no server round-trip, no ImageMagick, just JavaScript), you've probably hit…

Building Fluentic Style: CSS Rule Order Should Not Feel Like Astrology

This is part of my Building Fluentic Style series, where I’m writing down the design decisions, tradeoffs, and small surprises from building Fluenti…