Top all-time · #2779
Ben Frain
Personal blog · benfrain.comwebprogramming
Ben Frain's personal blog at benfrain.com covers web and programming. Since 2012, 28 different Hacker News readers have linked it 33 times, most often “Just use pixels (2015)”. It is still writing: the last post was on 2026-10-20, and you can follow it by feed.
Too few sampled comments (12) to say how often HN recommends it.?
Why HN links it
HN readers link Ben Frain's personal blog for its front-end and CSS writing, including icon fonts, leaving Sass, BEM, CSS selector performance and viewport meta tags. Most comments only cite it.
Summarised by Claude from a sample of 12 HN comments that link here. Each comment is marked recommending, critical or neutral (citing without judging); how this works.
Home
Most-linked posts?
- /css-performance-revisited-selectors-bloat-expensive-styles/3 people · 3 mentions · first linked 2016-05-20
- Just use pixels (2015)2 people · 2 mentions · first linked 2017-01-19
- OOCSS/Atomic CSS Are Responsive Web Design Anti-patterns2 people · 2 mentions · first linked 2015-01-15
What Hacker News says?
I tried using your app on an iPhone (with Add to Home Screen). - If I press the settings gear, the text on the settings page is about twice as wide as the screen, requiring horizontal scrolling. - On the front page, if I open the color picker, it's partially offscreen. - On all pages, if I do a scroll gesture in the wrong direction, it scrolls the entire UI rather than just the scrollable part. Admittedly, iOS has l…
Comment linking /preventing-body-scroll-for-modals-in-ios/
on “Private client-side-only PWAs are hard, but now Apple made them impossible”Submitted HTML templating with vanilla JavaScript ES2015 Template Literals (2018) as a story · 4 points
HN discussionI've always thought this article was reasonable: https://benfrain.com/seriously-use-icon-fonts/
Comment linking /seriously-use-icon-fonts/
on “How Font Awesome 5 Became Kickstarter’s Most Funded Software Project”Submitted Enduring CSS: writing style sheets for rapidly changing, long-lived projects as a story · 4 points
HN discussionHas anyone mentioned the Zergotech Freedom? New to the market and built like a tank. Review: https://benfrain.com/review-zergotech-freedom-ergonomic-mech... The glass sliding armrests are certainly unique.
Comment linking /review-zergotech-freedom-ergonomic-mechanical-keyboard/
on “Split keyboards and how to build them”Submitted Debugging CSS as a story · 3 points
HN discussionPedantic point. It’s ‘Sass’ and not ‘SASS’. Sass certainly pushed things forward in CSS world. Without Sass and LESS, Stylus et al. I am quite certain we wouldn’t have CSS custom properties and colour functions. Great additions to the language. That said, I left Sass specifically some years ago. https://benfrain.com/breaking-up-with-sass-postcss/ Tangentially related — in terms of dealing with CSS tooling/output for…
Comment linking /breaking-up-with-sass-postcss/
on “Stepping Away from Sass”Submitted Lightning fast Sass compiling with libsass, Node-sass and Grunt-sass as a story · 3 points
HN discussionFile size is a moot point with regards to long selectors - they are just a bad idea. [1][2] I am a fan of BEM to keep things sane. [3] [1] http://csswizardry.com/2012/05/keep-your-css-selectors-short... [2] https://benfrain.com/css-performance-revisited-selectors-blo... [3] http://getbem.com/
Comment linking /css-performance-revisited-selectors-bloat-expensive-styles/
on “CSS Purge”Submitted OOCSS/Atomic CSS Are Responsive Web Design Anti-patterns as a story · 2 points
HN discussionit's probably there cause some early implementation somewhere tried to be "smart" if you weren't explicit. too lazy to give you definitive answer, but: [1] https://www.w3.org/TR/css-device-adapt-1/ [2] https://benfrain.com/understanding-the-viewport-meta-tag-and...
Comment linking /understanding-the-viewport-meta-tag-and-css-viewport/
on “Mars Pathfinder Mission Home Page (1997)”Submitted Top Tips (for Sublime Text, Sass, CSS, Terminal and More) as a story · 2 points
HN discussionNot exactly, it's something I've been noticing from my experience with CSS and many teams with many members which were experienced programmers but without any CSS experience. I've shared these ones with my team, however: http://philipwalton.com/articles/css-architecture/ http://philipwalton.com/articles/side-effects-in-css/ http://philipwalton.com/articles/extending-styles/ http://benfrain.com/the-ten-commandments-o…
Comment linking /the-ten-commandments-of-sane-style-sheets/
on “How to Pick a Front End Web Framework”Submitted CSS performance revisited: selectors, bloat and expensive styles as a story · 2 points
HN discussionMemory impact, no. Atomic stylesheets are generally fractions of the size of a traditional monolithic CSS file. I've loaded up a 6MB CSS file for development locally and it's instant. Performance is more complicated, but generally it's never an issue. We've had huge webpages forever, often with many different CSS files and HTML included from all across an application and organization. When the browser has all of the…
Comment linking /css-performance-revisited-selectors-bloat-expensive-styles/
on “Tailwindo: Convert Your Bootstrap CSS to Tailwind CSS”Submitted Well done AI, that's the end of the honest boxes as a story · 1 points
HN discussionBear in mind that BEM (CSS-wise) is just a nomenclature. What it addresses is exactly excessive nesting and dependence between mark-up and styling. It roughly means that you imply structure via naming conventions instead of nesting (e.g. if you have a box inside a block, you'd style it via single class such as .my-block__my-box, instead of the traditional nesting approach .my-block .my-box). You can - and should - s…
Comment linking /the-ten-commandments-of-sane-style-sheets/
on “Things to Avoid When Writing CSS”Submitted Is CSS Grid slower than Flexbox? as a story · 1 points
HN discussionhttps://benfrain.com/video-courses/ultimate-text-editing-pro... It’s linked from the Sublime site too: https://www.sublimetext.com/support Full disclosure: I am the author.
Comment linking /video-courses/ultimate-text-editing-productivity-with-sublime-text/
on “Ask HN: How should I use my $2000 training budget before end of year?”Submitted Gradient borders on one or more sides with border-image as a story · 1 points
HN discussionCouple of other things to try. Hold off on loading and playing the videos until they are visible: https://web.dev/lazy-loading-video/#video-gif-replacement Automatically pause the video when they are scrolled off the screen and no longer visible: https://benfrain.com/automatically-play-and-pause-video-as-i...
Comment linking /automatically-play-and-pause-video-as-it-enters-and-leaves-the-viewport-screen/
on “Stylized Water Shader”Submitted Stop Dicking Around as a story · 1 points
HN discussion> bucketing ... "All of that is very different between the various engines, making the whole process even less predictable." Source: https://benfrain.com/css-performance-revisited-selectors-blo... In worst case complexity of styles resolution is O(nS*nD) where nS is a number of style rules and nD is a number of DOM elements. That's for current flat style table used by CSS. You can optimize bits and cases but it in g…
Comment linking /css-performance-revisited-selectors-bloat-expensive-styles/
on “WebKit Supports Nested CSS”Submitted The iOS Safari menu bar is hostile to web apps: discuss (2016) as a story · 1 points
HN discussionSubmitted Converting divs into accessible pseudo-buttons as a story · 1 points
HN discussionSubmitted Just use pixels (2015) as a story · 1 points
HN discussionSubmitted Just use pixels (2015) as a story · 1 points
HN discussionSubmitted Inline or combined media queries in Sass? as a story · 1 points
HN discussionSubmitted Breaking up with Sass: it’s not you, it’s me as a story · 1 points
HN discussionSubmitted OOCSS/Atomic CSS Are Responsive Web Design ‘anti-patterns’ as a story · 1 points
HN discussion
