The Curious Engineer

All blogs / Performance / optimization

CSS Wizardry

csswizardry.com

Award-winning web performance consultant Harry Roberts helps global brands optimise site speed through audits, consultancy, and training.

Performance / optimizationFrontend / CSS / browsersWeb development

’10’15’20’25
Posts
265 from 22 Dec 2009 to 28 Oct 2026
Posting
weekly (27 in the last year)
Kind
personal blog
Feed
https://csswizardry.com/feed.xml

2026 27

  1. Web-Perf Wednesday 015 – Failed Modulepreloads Need to Recover
  2. Web-Perf Wednesday 014 – Performance Budgets Need a Representative Worst
  3. Web-Perf Wednesday 013 – CrUX Adds Soft-Navigation Core Web Vitals
  4. Web-Perf Wednesday 012 – Return to the Unresolved Trace
  5. Web-Perf Wednesday 011 – SpeedCurve’s INP Observer Missed Its Threshold
  6. Web-Perf Wednesday 010 – Safari Keeps Scrolled Content in Place
  7. Web-Perf Wednesday 009 – CrUX Makes Ad Weight Public
  8. Web-Perf Wednesday 008 – Good INP Rates Keep Falling
  9. Web-Perf Wednesday 007 – Chrome Makes Busy Workers Measurable
  10. Web-Perf Wednesday 006 – Faster Browser Releases Change Your RUM Population
  11. How to Find an Exact Gmail Thread with Codex or Claude
  12. Unattributed Navigation Overhead (UNO) Is Underrated
  13. Web-Perf Wednesday 005 – RUM Needs More Than a Percentile
  14. Introducing LUX Sidecar: Your SpeedCurve Companion
  15. When Safari’s ‘Ignore Cache’ Ignored Cache-Control
  16. Web-Perf Wednesday 004 – A Quiet Week Is Time to Investigate
  17. Web-Perf Wednesday 003 – Native SPA Metrics Have Arrived
  18. Web-Perf Wednesday 002 – The Metrics Don’t Tell the Whole Story
  19. Measuring Component Performance with the Container Timing API
  20. Low- and Mid-Tier Mobile for the Real World (2026)
  21. Web-Perf Wednesday 001 – SPAs Are Finally Becoming Measurable
  22. Front-End’s Missing Metric: The TBT Window
  23. Meet Your Users Where They Are with Obs.js
  24. Better Browser Caching with No-Vary-Search
  25. font-family Doesn’t Fall Back the Way You Think
  26. What Is CSS Containment and How Can I Use It?
  27. When All You Can Do Is All or Nothing, Do Nothing

2025 7

  1. Obs.js: Context-Aware Web Performance for Everyone
  2. Low- and Mid-Tier Mobile for the Real World (2025)
  3. The Fastest Site in the Tour de France
  4. Making Sense of the Performance Extensibility API
  5. Why Do We Have a Cache-Control Request Header?
  6. HTML Is Not a Programming Language…
  7. Build for the Web, Build on the Web, Build with the Web

2024 8

  1. Licensing Code on CSS Wizardry
  2. A Layered Approach to Speculation Rules
  3. Designing (and Evolving) a New Web Performance Score
  4. Core Web Vitals Colours
  5. The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid
  6. Optimising for High Latency Environments
  7. Cache Grab: How Much Are You Leaving on the Table?
  8. blocking=render: Why would you do that?!

2023 10

  1. Correctly Configure (Pre) Connections
  2. The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache
  3. What Is the Maximum max-age?
  4. How to Clear Cache and Cookies on a Customer’s Device
  5. The Ultimate Low-Quality Image Placeholder Technique
  6. Core Web Vitals for Search Engine Optimisation: What Do We Need to Know?
  7. The HTTP/1-liness of HTTP/2
  8. In Defence of DOM­Content­Loaded
  9. Site-Speed Topography Remapped
  10. Why Not document.write()?

2022 4

  1. Speeding Up Async Snippets
  2. Critical CSS? Not So Fast!
  3. Measure What You Impact, Not What You Influence
  4. Optimising Largest Contentful Paint

2021 1

  1. Measuring Web Performance in Mobile Safari

2020 4

  1. Site-Speed Topography
  2. Speed Up Google Fonts
  3. Real-World Effectiveness of Brotli
  4. Web Performance Budgets, Pragmatically

2019 7

  1. Lazy Pre-Browsing with Prefetch
  2. Making Cloud.typography Fast(er)
  3. Time to First Byte: What It Is and How to Improve It
  4. Self-Host Your Static Assets
  5. Tips for Technical Interviews
  6. Cache-Control for Civilians
  7. Bandwidth or Latency: When to Optimise for Which

2018 10

  1. ITCSS × Skillshare
  2. What If?
  3. CSS and Network Performance
  4. The Three Types of Performance Testing
  5. Getting to Know a Legacy Codebase
  6. Image Inconsistencies: How and When Browsers Download Images
  7. Identifying, Auditing, and Discussing Third Parties
  8. My Digital Music Setup
  9. Measuring the Hard-to-Measure
  10. Finding Dead CSS

2017 18

  1. The Fallacies of Distributed Computing (Applied to Front-End Performance)
  2. Ten Years Old
  3. Relative Requirements
  4. Airplanes and Ashtrays
  5. Performance and Resilience: Stress-Testing Third Parties
  6. Refactoring Tunnels
  7. Little Things I Like to Do with Git
  8. Writing Tidy Code
  9. Configuring Git and Vim
  10. Base64 Encoding & Performance, Part 2: Gathering Data
  11. Base64 Encoding & Performance, Part 1: What’s Up with Base64?
  12. Code Smells in CSS Revisited
  13. Typography for Developers
  14. Moving CSS Wizardry onto HTTPS and HTTP/2
  15. Ack for CSS Developers
  16. A New Year, a New Focus
  17. Preparing Vim for Apple’s Touch Bar
  18. Choosing the Correct Average

2016 13

  1. CSS Shorthand Syntax Considered an Anti-Pattern
  2. CSS Wizardry Newsletter
  3. Nesting Your BEM?
  4. Improving Perceived Performance with Multiple Background Images
  5. Continue Normalising Your CSS
  6. Pure CSS Content Filter
  7. Pragmatic, Practical, and Progressive Theming with Custom Properties
  8. Refactoring CSS: The Three I’s
  9. Speaker’s Checklist: Before and After Your Talk
  10. Improving Your CSS with Parker
  11. The Importance of !important: Forcing Immutability in CSS
  12. Mixins Better for Performance
  13. Managing Typography on Large Apps

2015 9

  1. White October Events Workshop Partnership
  2. BEMIT: Taking the BEM Naming Convention a Step Further
  3. Travelling Like You Want to, When You Have To
  4. Contextual Styling: UI Components, Nesting, and Implementation Detail
  5. Subtleties with Self-Chained Classes
  6. Cyclomatic Complexity: Logic in CSS
  7. Immutable CSS
  8. Can CSS Be Too Modular?
  9. More Transparent UI Code with Namespaces

2014 13

  1. When to use @extend; when to use a mixin
  2. The Specificity Graph
  3. CSS Wizardry Ltd.: Year 1 in review
  4. CSS Guidelines 2.0.0
  5. Advice to budding front-end developers
  6. CSS Wizardry referral scheme
  7. Hacks for dealing with specificity
  8. Vim for People Who Think Things Like Vim Are Weird and Hard
  9. Grouping related classes in your markup
  10. My Trello workflow
  11. Naming UI components in OOCSS
  12. Use zero-width spaces to stop annoying Twitter users
  13. Extending silent classes in Sass

2013 27

  1. Workshop: Event Handler, London, February 2014
  2. I wrote (part of) a book!
  3. My setup
  4. The problems with ‘crafting’ code
  5. Taming data tables
  6. Workshop: Smashing Workshops, Zürich, December 2013
  7. Code reviews as a service
  8. Workshop: Make Do, Leeds, November 2013
  9. ‘It’s because you’re polite.’
  10. Let’s work together
  11. Make it count
  12. Speak The Web discount code
  13. Leeds hangout
  14. Writing DRYer vanilla CSS
  15. Hashed classes in CSS
  16. ‘Scope’ in CSS
  17. The flag object
  18. shame.css – full .net interview
  19. shame.css
  20. .net award nominee
  21. Introducing csswizardry-grids
  22. Responsive grid systems; a solution?
  23. You know your context – on critical thinking and thinking for yourself
  24. MindBEMding – getting your head ’round BEM syntax
  25. Your logo is still an image… and so is mine!
  26. Front-end performance for web designers and front-end developers
  27. Discussion via Branch

2012 20

  1. A new CSS Wizardry
  2. My Git workflow for inuit.css
  3. Code smells in CSS
  4. A classless class — on using more classes in your HTML
  5. Announcing pr.ofile.me
  6. inuit.css v4.0.0 — OOCSS, Sass and more
  7. Canvas Conf, 2012
  8. Tags in CSS files
  9. Shoot to kill; CSS selector intent
  10. Quasi-qualified CSS selectors
  11. The open/closed principle applied to CSS
  12. Single-direction margin declarations
  13. Keep your CSS selectors short
  14. Front-Trends 2012
  15. The single responsibility principle applied to CSS
  16. My HTML/CSS coding style
  17. Comments on CSS Wizardry
  18. Hacker News rebuttal
  19. Pragmatic, practical font sizing in CSS
  20. Breaking Good Habits — The Digital Barn

2011 54

  1. On HTML and CSS best practices
  2. Measuring and sizing UIs, 2011-style (and beyond)
  3. Create a notched current-state nav
  4. Build-along #1, reflection and reasoning
  5. CSS Wizardry build-along #1
  6. Sam Penrose Design — process and write-up
  7. Fully fluid, responsive CSS carousel
  8. The CSS Wizardry build-along is go!
  9. Build-along (testing the water)
  10. Reset restarted
  11. The ‘island’ object
  12. The ‘nav’ abstraction
  13. Ordered and numbered lists; the differences
  14. Writing efficient CSS selectors
  15. Do designers need to code?
  16. When using IDs can be a pain in the class...
  17. Two titillating table tips
  18. Building better grid systems
  19. Good developers are illusionists
  20. Updated CV
  21. More logo markup tips
  22. Borders on responsive images
  23. .net magazine awards nominee
  24. Responsive images right now
  25. Fluid grid calculator
  26. Namespacing fragment identifiers
  27. What is inuit.css?
  28. Styling alt text on images
  29. Introducing igloos — inuit.css gets plugins
  30. DIBI 2011
  31. Annotated <figure>s in HTML5 and CSS
  32. Font sizing with rem could be avoided
  33. jQuery placeholder plugin/polyfill
  34. On negative hovers
  35. Introducing inuit.css
  36. Ideas of March
  37. Coding up a semantic, lean timeline
  38. Link: Technical Web Typography: Guidelines and Techniques
  39. Problems with the sans-serif hack
  40. Mobile business card
  41. Creating a pure CSS dropdown menu
  42. Pure CSS(3) accordion
  43. CSS powered ribbons the clean way
  44. Create a centred horizontal navigation
  45. Link: Recreating the Luke's Beard social icons with CSS3
  46. Using the <body> element as a wrapper
  47. HTML(5) and text-level semantics
  48. Client respect
  49. Maximising hit-area for usability
  50. HTML elements, tags and attributes
  51. A new year, a new CSS Wizardry II
  52. Scrolling overflowed content in iOS
  53. The real HTML5 boilerplate
  54. A new year, a new CSS Wizardry

2010 32

  1. Mo’ robust paragraph indenting
  2. Media queries, handier than you think
  3. The implementation ∝ appreciation rule
  4. CSS: CamelCase Seriously Sucks!
  5. Improving CSS tooltips
  6. Design and education
  7. Mark up a semantic, accessible, progressively enhanced, mobile optimised progress bar (bonus: style the numbers in an ordered list!)
  8. I hate that I love Writer
  9. Unsung heroes
  10. Things are changing at CSS Wizardry
  11. Your logo is an image, not an <h1>
  12. Good developers vs. good salespeople
  13. Designing in the browser leads to better quality builds
  14. In response to ‘Invisible captcha to prevent form spam’
  15. Keeping code clean with content
  16. A quick counter to 'The Digital Agencies of the Future!'
  17. Set then unset (or reset...?)
  18. Zebra-striping rows and columns
  19. Semantics and sensibility
  20. Building sites without using IDs or classes
  21. 30 days without an iPhone
  22. Moving forward is holding us back
  23. A quick note on border radius
  24. Type tips — quick tips on all things web typography
  25. Multiple column lists using one <ul>
  26. Upside down domains — registering an international domain name
  27. CSS bar charts — styling data with CSS3 and progressive enhancement
  28. iPhone CSS — tips for building iPhone websites
  29. The three types of dash
  30. The importance of proper punctuation
  31. A reconsideration — in defence of <b> and <i> (or: people fear what they don’t understand)
  32. A suitable alternative — on proper use of alt attributes

2009 1

  1. Typographic work planner