Arrange a Masterclass

CSS Wizardry Posts Archive

I have written 247 post on this site, mostly covering CSS, architecture, performance, and web development. Find a reverse-chronological list of them below, or, at random, why not read Namespacing fragment identifiers?

2024


  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


  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


  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. Measuring Web Performance in Mobile Safari

2020


  1. Site-Speed Topography

  2. Speed Up Google Fonts

  3. Real-World Effectiveness of Brotli

  4. Performance Budgets, Pragmatically

2019


  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


  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


  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


  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


  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


  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. A new focus, a new site

  9. Vim for People Who Think Things Like Vim Are Weird and Hard

  10. Grouping related classes in your markup

  11. My Trello workflow

  12. Naming UI components in OOCSS

  13. Use zero-width spaces to stop annoying Twitter users

  14. Extending silent classes in Sass

2013


  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


  1. A new CSS Wizardry

  2. Open Sourceome

  3. My Git workflow for inuit.css

  4. Code smells in CSS

  5. A classless class—on using more classes in your HTML

  6. Announcing pr.ofile.me

  7. inuit.css v4.0.0—OOCSS, Sass and more

  8. Canvas Conf, 2012

  9. Tags in CSS files

  10. Video: Breaking Good Habits—Front-Trends, 2012

  11. Shoot to kill; CSS selector intent

  12. Quasi-qualified CSS selectors

  13. The open/closed principle applied to CSS

  14. Single-direction margin declarations

  15. Keep your CSS selectors short

  16. Front-Trends 2012

  17. The single responsibility principle applied to CSS

  18. My HTML/CSS coding style

  19. Introducing faavorite

  20. Comments on CSS Wizardry

  21. Hacker News rebuttal

  22. Pragmatic, practical font sizing in CSS

  23. Breaking Good Habits—The Digital Barn

2011


  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. hry.rbrts.me

  24. .net magazine awards nominee

  25. Responsive images right now

  26. Fluid grid calculator

  27. Namespacing fragment identifiers

  28. What is inuit.css?

  29. Styling alt text on images

  30. Introducing igloos—inuit.css gets plugins

  31. DIBI 2011

  32. Annotated <figure>s in HTML5 and CSS

  33. Font sizing with rem could be avoided

  34. jQuery placeholder plugin/polyfill

  35. On negative hovers

  36. Introducing inuit.css

  37. Ideas of March

  38. Coding up a semantic, lean timeline

  39. Link: Technical Web Typography: Guidelines and Techniques

  40. Problems with the sans-serif hack

  41. Mobile business card

  42. Creating a pure CSS dropdown menu

  43. Pure CSS(3) accordion

  44. CSS powered ribbons the clean way

  45. in:focus—a case study

  46. Announcing in:focus

  47. Forget responsive web design…

  48. Create a centred horizontal navigation

  49. Link: Recreating the Luke's Beard social icons with CSS3

  50. Using the <body> element as a wrapper

  51. HTML(5) and text-level semantics

  52. Client respect

  53. Maximising hit-area for usability

  54. HTML elements, tags and attributes

  55. A new year, a new CSS Wizardry II

  56. Scrolling overflowed content in iOS

  57. The real HTML5 boilerplate

  58. A new year, a new CSS Wizardry

2010


  1. Mo’ robust paragraph indenting

  2. Media queries, handier than you think

  3. Remote controlled hyperlinks (or multiple links in one hyperlink)

  4. Simplified page borders in pure CSS

  5. The implementation ∝ appreciation rule

  6. CSS: CamelCase Seriously Sucks!

  7. Tweet this!

  8. Let it snow!

  9. Improving CSS tooltips

  10. Design and education

  11. Mark up a semantic, accessible, progressively enhanced, mobile optimised progress bar (bonus: style the numbers in an ordered list!)

  12. I hate that I love Writer

  13. Unsung heroes

  14. Things are changing at CSS Wizardry

  15. Your logo is an image, not an <h1>

  16. Hyperbolic title using the word sexy to describe some code

  17. Good developers vs. good salespeople

  18. Designing in the browser leads to better quality builds

  19. In response to 'Invisible captcha to prevent form spam'

  20. Keeping code clean with content

  21. A quick counter to 'The Digital Agencies of the Future!'

  22. Set then unset (or reset...?)

  23. Zebra-striping rows and columns

  24. Semantics and sensibility

  25. Building sites without using IDs or classes

  26. 30 days without an iPhone

  27. Moving forward is holding us back

  28. A quick note on border radius

  29. Suzanna Haworth Photography redesign

  30. Usability in everyday items

  31. Type tips—quick tips on all things web typography

  32. Typographic phrases (or: how to turn sayings geeky)

  33. Multiple column lists using one <ul>

  34. Upside down domains—registering an international domain name

  35. CSS bar charts—styling data with CSS3 and progressive enhancement

  36. iPhone CSS—tips for building iPhone websites

  37. The three types of dash

  38. The importance of proper punctuation

  39. A reconsideration—in defence of <b> and <i> (or: people fear what they don’t understand)

  40. A suitable alternative—on proper use of alt attributes

2009


  1. Typographic work planner

Hi there, I’m Harry Roberts. I am an award-winning Consultant Web Performance Engineer, designer, developer, writer, and speaker from the UK. I write, Tweet, speak, and share code about measuring and improving site-speed. You should hire me.

You can now find me on Mastodon.

Suffering? Fix It Fast!

Projects

  • inuitcss
  • ITCSS – coming soon…
  • CSS Guidelines

Next Appearance

Learn:

I help teams achieve class-leading web performance, providing consultancy, guidance, and hands-on expertise.

I specialise in tackling complex, large-scale projects where speed, scalability, and reliability are critical to success.

Start a Conversation