Category: Web Development
Front-end craft since 2009: CSS architecture, naming conventions, semantics, and code built to survive contact with a real team.
2026
2025
2024
2018
2017
-
Airplanes and Ashtrays -
Refactoring Tunnels -
Writing Tidy Code -
Code Smells in CSS Revisited -
Typography for Developers
2016
-
CSS Shorthand Syntax Considered an Anti-Pattern -
Nesting Your BEM? -
Continue Normalising Your CSS -
Pure CSS Content Filter -
Pragmatic, Practical, and Progressive Theming with Custom Properties -
Refactoring CSS: The Three I’s -
The Importance of !important: Forcing Immutability in CSS -
Managing Typography on Large Apps
2015
-
BEMIT: Taking the BEM Naming Convention a Step Further -
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
2014
-
When to use @extend; when to use a mixin -
The Specificity Graph -
CSS Guidelines 2.0.0 -
Hacks for dealing with specificity -
Grouping related classes in your markup -
Naming UI components in OOCSS -
Use zero-width spaces to stop annoying Twitter users -
Extending silent classes in Sass
2013
-
The problems with ‘crafting’ code -
Taming data tables -
Writing DRYer vanilla CSS -
Hashed classes in CSS -
‘Scope’ in CSS -
The flag object -
shame.css – full .net interview -
shame.css -
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!
2012
-
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 -
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 -
The single responsibility principle applied to CSS -
My HTML/CSS coding style -
Hacker News rebuttal -
Pragmatic, practical font sizing in CSS
2011
-
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 -
When using IDs can be a pain in the class... -
Two titillating table tips -
Building better grid systems -
Good developers are illusionists -
More logo markup tips -
Borders on responsive images -
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 -
Annotated <figure>s in HTML5 and CSS -
Font sizing with rem could be avoided -
jQuery placeholder plugin/polyfill -
On negative hovers -
Introducing inuit.css -
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 -
Maximising hit-area for usability -
HTML elements, tags and attributes -
Scrolling overflowed content in iOS -
The real HTML5 boilerplate
2010
-
Mo’ robust paragraph indenting -
Media queries, handier than you think -
CSS: CamelCase Seriously Sucks! -
Improving CSS tooltips -
Mark up a semantic, accessible, progressively enhanced, mobile optimised progress bar (bonus: style the numbers in an ordered list!) -
Unsung heroes -
Your logo is an image, not an <h1> -
Designing in the browser leads to better quality builds -
In response to ‘Invisible captcha to prevent form spam’ -
Keeping code clean with content -
Set then unset (or reset...?) -
Zebra-striping rows and columns -
Semantics and sensibility -
Building sites without using IDs or classes -
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
