bbioonThemes
  • Home
  • Blog

Tag: Block Styles

Development, Front-end

Why a $50k design system culture still lost to one-off CSS

A SaaS team had Storybook, Figma tokens and a dedicated Slack channel, and still shipped one-off CSS for every feature. Strict linting made it worse. A contribution bridge is what finally moved them.

Read Article
Accessibility, Development, Front-end

Twelve fade-in keyframes in one stylesheet, and the fix

One WooCommerce stylesheet had twelve @keyframes definitions for a single fade-in, spelled three different ways. Here is the tokens file that replaced them, and how reduced-motion support fits in at the token level.

Read Article
Design, Development

What accessible UX research fixed that my ARIA patches couldn’t

Our WooCommerce configurator passed the automated audits and still stopped a screen reader user at step one. Accessible UX research, and Michele A. Williams’ new book on it, is what got us out of the patch-and-move-on habit.

Read Article
Development, Front-end

Modern CSS features that let me delete a client’s JavaScript

A client’s WooCommerce site shipped a JavaScript bundle whose main job was resizing a textarea. field-sizing does it in one line. Here are the modern CSS features that are baseline now, and the code they let you delete.

Read Article
Development, Front-end

Debugging the Gamepad API with CSS cascade layers

Console logging the Gamepad API at 60 frames per second tells you nothing useful. Here is the visual debugger I built instead, with its styles isolated in a CSS cascade layer so they stop fighting the theme.

Read Article
Development, Front-end

How to split text into letters without breaking screen readers

CSS still has no :nth-letter selector, so letter-by-letter text effects mean splitting a header into spans, which screen readers then read out one letter at a time. Here is the ARIA markup and the PHP helper that avoid that.

Read Article
Development, Front-end

Fixing link underline alignment with text-decoration-inset

A client kept flagging link underlines that ran a couple of pixels past the letters. The CSS property text-decoration-inset clips them without pseudo-element hacks, and it animates on hover. Firefox only for now.

Read Article
Development, Front-end

Overlapping CSS avatars that respond to their container

A Meet the Team row of overlapping avatars broke every time the client added a person. Here is the CSS that works out the negative margin itself, using sibling-count() and container query units.

Read Article
Development, Front-end

Modern CSS architecture over a heavy JavaScript library

A JavaScript library added for smooth page transitions hijacked every internal link on a WooCommerce store. Pulling it out and using View Transitions, namespaced classes and accessibility tokens fixed more than it broke.

Read Article
Core Updates, Development

Modern CSS can replace most of your UI JavaScript

A WooCommerce site was choking on jQuery and Intersection Observers just to run a hover gallery and a filter menu. CSS Wrapped 2025 covers the native features that made most of that script unnecessary.

Read Article

Posts navigation

Previous 1 … 11 12 13 … 20 Next

bbioonThemes

Senior WordPress Engineer
Toptal & Codeable Expert

Connect

  • GitHub
  • Twitter
  • LinkedIn
  • Codeable

Explore

  • Expertise
  • Work
  • Insights
  • Blog

Resources

  • bbioonThemes
  • Contact
  • Privacy Policy
© 2026 bbioonThemes. All rights reserved.
Privacy