Top all-time · #384
CSS Wizardry
Personal blog · csswizardry.com · on HN as csswizardrywebdesign
CSS Wizardry is a personal blog at csswizardry.com about web and design. Since 2008, 140 different Hacker News readers have linked it 194 times, most often “Getting your head ’round BEM syntax”. It is still writing: the last post was on 2026-10-28, and you can follow it by feed.
Sometimes recommended · 9 of 40 sampled comments recommend it?
Why HN links it
HN readers link it for BEM naming, CSS architecture, !important, CSS loading and selector performance. Commenters call several posts great or good; one disputes its advice on !important.
- Recommended for · 9 comments
- Called great, good and pretty good; says BEM better than the commenter; its waterfall graphics illustrate clearly.
Summarised by Claude from a sample of 40 HN comments that link here. Each comment is marked recommending, critical or neutral (citing without judging); how this works.
Award-winning web performance consultant Harry Roberts helps global brands optimise site speed through audits, consultancy, and training.
Most-linked posts?
- Getting your head ’round BEM syntax12 people · 12 mentions · first linked 2013-02-04
- CSS and Network Performance6 people · 6 mentions · first linked 2018-11-12
- Self-host your static assets (2019)4 people · 6 mentions · first linked 2019-06-02
- Typogridphy — A Typographical and Grid Layout CSS Framework From Harry Roberts of CSS Wizardry4 people · 5 mentions · first linked 2008-05-23
- The Three CS: Concatenate, Compress, Cache4 people · 4 mentions · first linked 2023-10-23
- Time to First Byte: What It Is and Why It Matters4 people · 4 mentions · first linked 2019-08-15
- Single-direction margin declarations in CSS3 people · 4 mentions · first linked 2018-12-04
- /2011/09/when-using-ids-can-be-a-pain-in-the-class/3 people · 3 mentions · first linked 2013-01-30
- Writing efficient CSS selectors3 people · 3 mentions · first linked 2013-01-15
- The real HTML5 boilerplate3 people · 3 mentions · first linked 2011-02-20
What Hacker News says?
One day I plan on comparing all these half-decent frameworks and writing a post about it.. one day.. Here are some others I've found (Note: This is not a full listing, others are old/abandoned so I've omitted them): http://csswizardry.com/inuitcss/ http://framelessgrid.com/ http://goldengridsystem.com/ http://foundation.zurb.com/ http://goldilocksapproach.com/ http://www.columnal.com/ http://www.getskeleton.com/ htt…
Comment linking /inuitcss/
on “Bootstrap 2.0, From Twitter”Submitted Little Things I Like to Do with Git as a story · 656 points
HN discussionMy understanding is that performance is a negligible factor next to maintainability when writing CSS in virtually all cases. The best post I've seen on the subject is by Steve Souders[0], which does include some numbers. [0] http://www.stevesouders.com/blog/2009/03/10/performance-impa... Further reading: http://csswizardry.com/2011/09/writing-efficient-css-selecto... https://developer.mozilla.org/en-US/docs/CSS/Writ…
Comment linking /2011/09/writing-efficient-css-selectors/
on “An Advanced Guide to HTML and CSS”Submitted Shame.css as a story · 243 points
HN discussion> I've never seen selector performance used as an argument for OOCSS. Harry Roberts is one of the most vociferous proponents of OOCSS, and he has written about it a few times, notably here: http://csswizardry.com/2011/09/writing-efficient-css-selecto... > That's a pretty broad sweeping statement that I think you'd be very hard pressed to back up. I'll admit it's an opinionated statement, but I don't think that in it…
Comment linking /2011/09/writing-efficient-css-selectors/
on “An Advanced Guide to HTML and CSS”Submitted The Fastest Google Fonts as a story · 225 points
HN discussionI came up with this (in relation to Bootstrap) in 2011: http://csswizardry.com/2011/08/building-better-grid-systems/ This then became the basis for CSS Wizardry Grids: http://csswizardry.com/2013/02/introducing-csswizardry-grids...
Comment linking /2013/02/introducing-csswizardry-grids/
on “Why the Bootstrap 3 Grid Works (2013)”Submitted Self-host your static assets (2019) as a story · 112 points
HN discussionFirstly, thanks so much for starting to work on this! Let me suggest a few things: * I'm confused as to why you're using tables for layout? Might want to consider something more modern, and use tables just for tabular data, and use divs, classes, and CSS for handling the layout: http://learnlayout.com/ You can get a lot done without using tables and <center> tags, etc. * The width on your table is 85%, why not 100%?…
Comment linking /2011/09/when-using-ids-can-be-a-pain-in-the-class/
on “Ask HN: New attempt at mobile markup – keep or bail?”Submitted Critical CSS? Not So Fast as a story · 96 points
HN discussionI've adopted the 'BEM' way of naming my css classes and so on. It's pretty convenient, and it grows on you pretty quickly. I hope this helps - http://csswizardry.com/2013/01/mindbemding-getting-your-head...
Comment linking /2013/01/mindbemding-getting-your-head-round-bem-syntax/
on “Pure: a set of small, responsive CSS modules”Submitted Writing efficient CSS selectors as a story · 88 points
HN discussionSeems like what you're describing here is BEM (Block/Element/Modifier) - those interested can read more about it here: http://csswizardry.com/2013/01/mindbemding-getting-your-head... Basically it's anti-nesting and proposes being very specific with regards to class naming: .block{} .block__element{} .block--modifier{} I've experimented a bit with this lately but haven't come to a conclusion yet myself. Yes, it does…
Comment linking /2013/01/mindbemding-getting-your-head-round-bem-syntax/
on “Show HN: Myth – CSS the way it was imagined”Submitted The real HTML5 boilerplate as a story · 84 points
HN discussionPoint 13, ironically, reminds me of one of the best bits of writing[1] I ever did. I somehow lost an entire near-complete draft[2] of an article, so I had to write it again from scratch. It came out much, much better than the original. 1. https://csswizardry.com/archive/ 2. A fact I am embarrassed to admit in present company. I still can’t remember how it happened.
Comment linking /archive/
on “Advice for a friend who wants to start a blog”Submitted Front-end performance for web designers and front-end developers as a story · 82 points
HN discussionI disagree on !important. Good use of !important in high level css is outlined pretty nicely in this article: http://csswizardry.com/2016/05/the-importance-of-important/
Comment linking /2016/05/the-importance-of-important/
on “CSS coding techniques”Submitted Making Cloud.typography Faster as a story · 79 points
HN discussion> …and faster response times across the globe, right? Unfortunately not. There is no benefit to leaving your critical files on anyone else’s infrastructure: https://csswizardry.com/2019/05/self-host-your-static-assets...
Comment linking /2019/05/self-host-your-static-assets/
on “jQuery 3.6.0”Submitted Inuit.css - Another CSS framework as a story · 72 points
HN discussionI think if more web developers understood how browsers actually render a page we'd get much better web pages. In the case of CSS, the browser won't render until all the CSS files are loaded and parsed. Having lots of them is terrible for time-to-first-paint performance. That's reason enough to inline styles in the head and only have one CSS link on a page if you want something simple, or to use media queries in link…
Comment linking /2018/11/css-and-network-performance/
on “Neither PWA nor AMP are needed to make a website load fast”Submitted Optimising Largest Contentful Paint as a story · 45 points
HN discussionI am really glad someone has put this together - I was enjoying Harry Roberts talk at RenderConf until he dropped this in our faces: http://csswizardry.com/2016/05/the-importance-of-important/ Utility classes I dislike (mixins plx) and the idea of using important with them is not a design decision I would want to pick up. I guess my bigger problem is that Harry sells himself as an expert, stands up on stage telling…
Comment linking /2016/05/the-importance-of-important/
on “Universal.css”Submitted Blocking=render: Why would you do that? as a story · 42 points
HN discussion>Though its the most ugly, I'm a fan of the original B__E--M I feel this is something people need to learn to look past - because I agree entirely . It looks terrible. Absolutely terrible. Names get long (but yay for autocompleters!) - but everything is readable. CSS shouldn't be aesthetic. It should be legible. Maintaining something you can't read is hell - every programmer knows this. I also make use of prefixes t…
Comment linking /2015/03/more-transparent-ui-code-with-namespaces/
on “18F: CSS coding style guide”Submitted During a Technical Interview, Ask – Why Is This Position Available? as a story · 39 points
HN discussionThe double hyphen is actually part of a pretty common naming convention (BEM-style) for distinguishing between separate components, component modifiers, and component sub-objects. Examples: https://gist.github.com/1309546 http://nicolasgallagher.com/about-html-semantics-front-end-a... http://csswizardry.com/2013/01/mindbemding-getting-your-head... http://engineering.appfolio.com/2012/11/16/css-architecture
Comment linking /2013/01/mindbemding-getting-your-head-round-bem-syntax/
on “Show HN: hint.css – a tooltip library in CSS”Submitted Little Things I Like to Do with Git (2017) as a story · 35 points
HN discussionYou can detect print very, very easily. I helped the NHS track print-users using this: https://csswizardry.com/2018/03/measuring-the-hard-to-measur... Note that we can’t use `background-image: url();` here as browsers will not print background styles by default, so we’d likely miss the majority of cases.
Comment linking /2018/03/measuring-the-hard-to-measure/
on “The Fastest Google Fonts”Submitted The single responsibility principle applied to CSS as a story · 24 points
HN discussion
