A quick but important reminder that font-family declarations don’t inherit fallback stacks the way many developers assume.
CSS containment lets you isolate layout and paint work to self-contained ‘islands’. Here’s what each contain value does and how to use it safely.
If your design system can only apply `loading=lazy` or `fetchpriority=high` blindly, it may be safer not to apply them at all.
Discover the most representative low- and mid-tier mobile devices for web performance testing in 2025.
How fast are pro cycling teams’ and manufacturers’ websites? A CrRRUX-powered deep dive into bike brand performance, visibility, and missed opportunities.
Making sense—and use!—of the new Performance Extensibility API in Chrome DevTools.
Learn how the Cache-Control request header works, how browsers handle refresh and hard refresh caching, and when developers should use it themselves.
Is HTML a programming language? In this short post, I explore why HTML is powerful, fundamental, and essential—but not a programming language.
What is the real, long-term cost of adopting a JavaScript framework?
I’ve recently decided to apply the permissive MIT License to all content on CSS Wizardry by default. How does this affect you?
The new Speculation Rules API is incredibly powerful, but we can do so much more! By taking a layered approach, we can add more progressive functionality.
Why design another new performance score?! Good question…
If, like me, you frequently require the Core Web Vitals colour palete, here it is!
If you want to start consulting, you’re gonna need some paperwork!
We can’t do much to change latency, so how can we work around it?
Quantifying the importance of caching just got a lot easier
Why on earth would you make something render-blocking?!
We’re probably familiar with preconnect, but are we getting it right?
We know we should do it, but do we know how?
How long?! RFC9111 lets max-age reach 68 years—far beyond the usual one that developers set. Here are the raw numbers, the spec, and when to use it.
There’s a super quick and easy way to clear cache on your customers’ devices. Are you using it yet?
Can Low-Quality Image Placeholders and LCP play nicely together?
There’s still a lot of misunderstanding about CWV for SEO. Let’s work it out together.
If HTTP/2 is so much better, why does it look so similar to HTTP/1?!
Is there any reason to still measure the DOMContentLoaded event? Perhaps…
Revisiting and remapping my Site-Speed Topography technique for assessing web performance at large
We’re often told not to use document.write(), but… why?!
Async snippets used to improve performance, but now they’re a legacy anti-pattern. How do we handle them now?
Critical CSS promises faster loading, but is it worth the complexity? Learn when Critical CSS actually boosts performance or when it might slow you down.
When implementing performance fixes, it’s imperative that you measure the right thing—but what is ‘right’?
Let’s look at some more technical and non-obvious aspects of optimising Largest Contentful Paint
How often do you test your site in iOS Safari? Do you even know how?!
Learning the lay of the land
Google Fonts is fast. Now it’s faster. Much faster.
How effective is Brotli, really?
If you’ve ever struggled to define performance budgets, this off-the-shelf trick is what you’re looking for.
Using prefetch for fun and profit
What issues does Hoefler&Co’s Cloud.typography introduce, and how can we mitigate them?
Just how much does TTFB matter when it comes to front-end performance?
Why is it so much better to self-host your static assets?
How can you prepare for and survive a technical interview?
What does Cache-Control really do? In basic terms? Let’s find out!
How can you tell when bandwidth or latency are your bottlenecks?
The official introduction to ITCSS on Skillshare
How do we so often forget to ask the simple question: what if?
How can CSS impact network and resource-loading performance? Can things be that serious?
How can we make it easier for businesses to understand when and what to measure?
What should you do when you first get launched into an old, sprawling CSS codebase?
How and when do browsers download certain types of image? What does that mean for performance?
Gathering data about third-parties using free and open-source tooling
An overview of my hardware and software setup for listening to digital music
How can we gather valuable data about previously hard-to-measure things?
Finding dead or unused CSS on a live website
What can front-end and performance engineers learn from the Fallacies of Distributed Computing?
csswizardry.com turns ten today!
Define the relative importance of project traits in order to make development smoother
Sometimes you need to make it possible to do the wrong thing…
Assessing the fragility and resilience of third party resources
A metaphor for defining the scope of refactoring tasks
Handy Git tricks and aliases: leaderboards, praise, word-diff, branch history, daily recaps, changelog generation, and more in one quick guide.
Even the most inexperienced developers can write great looking code
Both amazing tools in their own rights, how can we get both playing nicely together?
Statistics, tests, and numbers looking at the performance costs of Base64
A look at the many huge disadvantages of Base64 encoding assets into your CSS
An update to my 2012 article, Code Smells in CSS
A look at the simple differences that developers and engineers can make in order to improve the quality of their typography
Improving security and performance on CSS Wizardry
Using the Ack tool to audit and profile your CSS
In 2017, I want to begin shifting my focus more toward making things fast
Apple are replacing their function row with a Touch Bar; how will this affect Vim?
A look at which average works best for representing certain types of data
Avoid using CSS’ shorthand syntax
CSS Wizardry has just got itself a newsletter…
A look at the possible benefits of nesting BEM, and mitigating the side effects
Using CSS gradients and multiple backgrounds to improve resilience and perceived performance
Why we should still be using Normalize.css
Experiment: Making a content filter using CSS
A low-cost approach for providing user customisation in UI projects
Three key steps to help you refactoring legacy code
Giving talks is stressful. Follow these tips to make the logistics of it a little simpler.
Using static analysis to learn where to improve your CSS
Forcing immutability in our utility classes by using !important
A look at the performance difference between Sass’ mixins and @extend
A look at managing typography more practically on larger sites and apps
An exciting new partnership to offer public workshops
Adding further meaning and information to the BEM naming convention
My own personal tips and tricks for surviving lots of air travel.
How to style specific components when they’re in specific locations
A brief note on some of the subtleties and oddities when chaining classes with themselves.
A look at how CSS has always contained logic and conditions
Treating CSS rules as being immutable
Looking at the dangers of abstracting CSS too far
Employing a suite of namespaces to make your UI code more readable and transparent
When is it suitable to use Sass @extend or mixin features, and why?
The Specificity Graph as a model for visualising specificity issues in your code
A look back on my first year of self employment
Announcing the next iteration and business model of my popular CSS Guidelines document
A collation of the advice I regularly give out to new and emerging web developers
A way to say thank you to the individuals responsible for their companies hiring me
A couple of quick hacks and tricks for manipulating specificity
An introduction to the whats and the whys of using Vim as your text editor
An interesting way of visually and ‘physically’ grouping multiple class attributes
How I manage development projects using Trello
A way of giving complex, OOCSS-built components more meaningful names
A little trick to stop mentioning Twitter users when you write @import, etc.
A simple trick for controlling the reach of Sass’ `@extend`
My first workshop in association with the fine folk at Event Handler
My section in the latest Smashing Book
A brief overview of my tools and software I use for work
Some thoughts on our use of the word ‘craft’ to describe our work
Laying out data tables in a consistent way, finally!
Announcing my first workshop in association with Smashing Workshops
A new service I’m offering: remote code reviews
Announcing my first workshop in association with Make Do
A personal post about helpfulness and politeness.
I’m looking for amazing people to work with on great products.
Everything you do, do it for a reason, and make that reason a good one.
Amazing events with 25% off!
I have a couple of days off in Leeds around two conferences; let’s meet…?
DRYing out our CSS at its most basic level
Spoofing the uniqueness of IDs by putting hashes in your classes
Applying the concept of scope to our CSS
The full version of the .net magazine shame.css interview
Keeping track of your hacks
I’ve been nominated for a .net award!
A responsive, fluid, nestable, Sass-based grid system.
A look at building a practical, robust, flexible, usable responsive grid system.
About learning to look at things objectively and apply your own context
A primer on the oft-confusing BEM notation for CSS
Balancing image semantics with performance ideals
A comprehensive primer on front-end performance for designers and front-end developers
Adding comments though Branch
Big changes for CSS Wizardry
A brief overview of how I use Git, specifically on inuit.css.
The things I look out for when writing or reviewing CSS.
An analogy to explain why it is a good idea to use more classes.
CSS selectors, and their combinations, can be fast or slow! And while hopefully imperceptible, it’s definitely worth knowing about.
2025 refresh: build a perfectly centred horizontal nav with just two Flexbox rules—`display:flex` and `justify-content:center`. Demo included!