CSS Wizardry
Low- and Mid-Tier Mobile for the Real World (2025)
The Fastest Site in the Tour de France
Making Sense of the Performance Extensibility API
Why Do We Have a Cache-Control Request Header?
HTML Is Not a Programming Language…
Build for the Web, Build on the Web, Build with the Web
Licensing Code on CSS Wizardry
A Layered Approach to Speculation Rules
Designing (and Evolving) a New Web Performance Score
Core Web Vitals Colours
The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid
Optimising for High Latency Environments
Cache Grab: How Much Are You Leaving on the Table?
blocking=render: Why would you do that?!
Correctly Configure (Pre) Connections
The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache
What Is the Maximum max-age?
How to Clear Cache and Cookies on a Customer’s Device
The Ultimate Low-Quality Image Placeholder Technique
Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?
The HTTP/1-liness of HTTP/2
In Defence of DOMContentLoaded
Site-Speed Topography Remapped
Why Not document.write()?
Speeding Up Async Snippets
Critical CSS? Not So Fast!
Measure What You Impact, Not What You Influence
Optimising Largest Contentful Paint
Measuring Web Performance in Mobile Safari
Site-Speed Topography
Speed Up Google Fonts
Real-World Effectiveness of Brotli
Performance Budgets, Pragmatically
Lazy Pre-Browsing with Prefetch
Making Cloud.typography Fast(er)
Time to First Byte: What It Is and How to Improve It
Self-Host Your Static Assets
Tips for Technical Interviews
Cache-Control for Civilians
Bandwidth or Latency: When to Optimise for Which
ITCSS × Skillshare
What If?
CSS and Network Performance
The Three Types of Performance Testing
Getting to Know a Legacy Codebase
Image Inconsistencies: How and When Browsers Download Images
Identifying, Auditing, and Discussing Third Parties
My Digital Music Setup
Measuring the Hard-to-Measure
Finding Dead CSS
The Fallacies of Distributed Computing (Applied to Front-End Performance)
Ten Years Old
Relative Requirements
Airplanes and Ashtrays
Performance and Resilience: Stress-Testing Third Parties
Refactoring Tunnels
Little Things I Like to Do with Git
Writing Tidy Code
Configuring Git and Vim
Base64 Encoding & Performance, Part 2: Gathering Data
Base64 Encoding & Performance, Part 1: What’s Up with Base64?
Code Smells in CSS Revisited
Typography for Developers
Moving CSS Wizardry onto HTTPS and HTTP/2
Ack for CSS Developers
A New Year, a New Focus
Preparing Vim for Apple’s Touch Bar
Choosing the Correct Average
CSS Shorthand Syntax Considered an Anti-Pattern
CSS Wizardry Newsletter
Nesting Your BEM?
Improving Perceived Performance with Multiple Background Images
Continue Normalising Your CSS
Pure CSS Content Filter
Pragmatic, Practical, and Progressive Theming with Custom Properties
Refactoring CSS: The Three I’s
Speaker’s Checklist: Before and After Your Talk
Improving Your CSS with Parker
The Importance of !important: Forcing Immutability in CSS
Mixins Better for Performance
Managing Typography on Large Apps
White October Events Workshop Partnership
BEMIT: Taking the BEM Naming Convention a Step Further
Travelling Like You Want to, When You Have To
Contextual Styling: UI Components, Nesting, and Implementation Detail
Subtleties with Self-Chained Classes
Cyclomatic Complexity: Logic in CSS
Immutable CSS
Can CSS Be Too Modular?
More Transparent UI Code with Namespaces
When to use @extend; when to use a mixin
The Specificity Graph
CSS Wizardry Ltd.: Year 1 in review
CSS Guidelines 2.0.0
Advice to budding front-end developers
CSS Wizardry referral scheme
Hacks for dealing with specificity
Vim for People Who Think Things Like Vim Are Weird and Hard
Grouping related classes in your markup
My Trello workflow
Naming UI components in OOCSS
Use zero-width spaces to stop annoying Twitter users
Extending silent classes in Sass
Workshop: Event Handler, London, February 2014
I wrote (part of) a book!
My setup
The problems with ‘crafting’ code
Taming data tables
Workshop: Smashing Workshops, Zürich, December 2013
Code reviews as a service
Workshop: Make Do, Leeds, November 2013
‘It’s because you’re polite.’
Let’s work together
Make it count
Speak The Web discount code
Leeds hangout
Writing DRYer vanilla CSS
Hashed classes in CSS
‘Scope’ in CSS
The flag object
shame.css – full .net interview
shame.css
.net award nominee
Introducing csswizardry-grids
Responsive grid systems; a solution?
You know your context – on critical thinking and thinking for yourself
MindBEMding – getting your head ’round BEM syntax
Your logo is still an image… and so is mine!
Front-end performance for web designers and front-end developers
Discussion via Branch
A new CSS Wizardry
My Git workflow for inuit.css
Code smells in CSS
A classless class—on using more classes in your HTML
Announcing pr.ofile.me
inuit.css v4.0.0—OOCSS, Sass and more
Canvas Conf, 2012
Tags in CSS files
Shoot to kill; CSS selector intent
Quasi-qualified CSS selectors
The open/closed principle applied to CSS
Single-direction margin declarations
Keep your CSS selectors short
Front-Trends 2012
The single responsibility principle applied to CSS
My HTML/CSS coding style
Comments on CSS Wizardry
Hacker News rebuttal
Pragmatic, practical font sizing in CSS
Breaking Good Habits—The Digital Barn
On HTML and CSS best practices
Measuring and sizing UIs, 2011-style (and beyond)
Create a notched current-state nav
Build-along #1, reflection and reasoning
CSS Wizardry build-along #1
Sam Penrose Design—process and write-up
Fully fluid, responsive CSS carousel
The CSS Wizardry build-along is go!
Build-along (testing the water)
Reset restarted
The ‘island’ object
The ‘nav’ abstraction
Ordered and numbered lists; the differences
Writing efficient CSS selectors
Do designers need to code?
When using IDs can be a pain in the class...
Two titillating table tips
Building better grid systems
Good developers are illusionists
Updated CV
More logo markup tips
Borders on responsive images
.net magazine awards nominee
Responsive images right now
Fluid grid calculator
Namespacing fragment identifiers
What is inuit.css?
Styling alt text on images
Introducing igloos—inuit.css gets plugins
DIBI 2011
Annotated <figure>s in HTML5 and CSS
Font sizing with rem could be avoided
jQuery placeholder plugin/polyfill
On negative hovers
Introducing inuit.css
Ideas of March
Coding up a semantic, lean timeline
Link: Technical Web Typography: Guidelines and Techniques
Problems with the sans-serif hack
Mobile business card
Creating a pure CSS dropdown menu
Pure CSS(3) accordion
CSS powered ribbons the clean way
Create a centred horizontal navigation
Link: Recreating the Luke's Beard social icons with CSS3
Using the <body> element as a wrapper
HTML(5) and text-level semantics
Client respect
Maximising hit-area for usability
HTML elements, tags and attributes
A new year, a new CSS Wizardry II
Scrolling overflowed content in iOS
The real HTML5 boilerplate
A new year, a new CSS Wizardry
Mo’ robust paragraph indenting
Media queries, handier than you think
The implementation ∝ appreciation rule
CSS: CamelCase Seriously Sucks!
Improving CSS tooltips
Design and education
Mark up a semantic, accessible, progressively enhanced, mobile optimised progress bar (bonus: style the numbers in an ordered list!)
I hate that I love Writer
Unsung heroes
Things are changing at CSS Wizardry
Your logo is an image, not an <h1>
Good developers vs. good salespeople
Designing in the browser leads to better quality builds
In response to ‘Invisible captcha to prevent form spam’
Keeping code clean with content
A quick counter to 'The Digital Agencies of the Future!'
Set then unset (or reset...?)
Zebra-striping rows and columns
Semantics and sensibility
Building sites without using IDs or classes
30 days without an iPhone
Moving forward is holding us back
A quick note on border radius
Type tips—quick tips on all things web typography
Multiple column lists using one <ul>
Upside down domains—registering an international domain name
CSS bar charts—styling data with CSS3 and progressive enhancement
iPhone CSS—tips for building iPhone websites
The three types of dash
The importance of proper punctuation
A reconsideration—in defence of <b> and <i> (or: people fear what they don’t understand)
A suitable alternative—on proper use of alt attributes
Typographic work planner