Actual CSS breakpoints you need to know | Thomas M. Semmler

An excellent overview of why the typical "listicle" style tweet purporting to show you the "only breakpoints you'll ever need! 😎👇🧵" is not just silly, but actively missing the point of responsive design, fluid layouts, and the modern web. Thomas has written a really nice explanation as to why breakpoints occur, the history behind them, and (importantly) how we're only just beginning to fully understand the real breakpoints: motion preferences, colour schemes, input variation etc.

In other words, media queries may be useful for art direction and formatting, but if you actually want to understand the true CSS breakpoints, you need to look at very different parts of the spec.

On the misuse of the term "CSS breakpoint" (as opposed to media query or just breakpoint):

There are no "CSS Breakpoints", because not only is it not CSS that is breaking, but they are also not exclusive to CSS.

On Twitter grifters:

Unfollow people that give you listicles of arbitrary pixel values to satisfy your desire to have it easy. The web is easy. But it is also very complex. You better get into it!

Explore Other Notes

Older âž¡

aria-label is a code smell

A very interesting breakdown of why accessibility auditors often see ARIA labels as red flags, deftly explained (as ever) by Eric. (I also must admit that the interactive-only aspect of ARIA labels […]
  • An excellent overview of why the typical "listicle"&nbsp;style tweet purporting to show you the "<em>only breakpoints you'll ever need! </em>&#x1f60e;&#x1f447;&#x1f9f5;" is not just silly, but [&#8230;]
  • Murray Adcock.
Journal permalink

Made By Me, But Made Possible By:

CMS:

Build: Gatsby

Deployment: GitHub

Hosting: Netlify

Connect With Me:

Twitter Twitter

Instagram Instragram

500px 500px

GitHub GitHub

Keep Up To Date:

All Posts RSS feed.

Articles RSS feed.

Journal RSS feed.

Notes RSS feed.