--- title: "The evolution of scalable CSS" publication: "Frontend Focus" issue: 568 published_at: "2022-11-16" canonical_url: "https://frontendfoc.us/issues/568" --- Plus why you shouldn't use px for font sizes, the math of nested corners, and Opera gets a TikTok client? | Together with [![Renuo - mugshotbot\](https://res.cloudinary.com/cpress/image/upload/c_fill,g_auto,e_trim,w_600,h_100/e_make_transparent/co_white,e_outline:7/oex9flmnwzulo8uuaoqi.png)](https://mugshotbot.com/customize?utm_source=Newsletter-Campaign&utm_medium=%20Newsletter&utm_campaign=Frontend+Primary&utm_id=Cooper-Newsletter) #​568 — November 16, 2022 | [Read on the web](https://frontendfoc.us/issues/568) [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1668609501/qeom8twtvhhyexdtdsbm.jpg)](https://frontendmastery.com/posts/the-evolution-of-scalable-css/) [The Evolution of Scalable CSS](https://frontendmastery.com/posts/the-evolution-of-scalable-css/) — A deep dive into the problems often faced with scaling the use CSS on large projects. You should come away with a good grasp on past approaches, and how popular tools like Tailwind (and others) approach things, for better or worse. “_Whatever approach is taken, establishing foundations that bridge the design gap is a key element to scaling CSS._” Rem [![\](https://copm.s3.amazonaws.com/773fbbcd.png)](https://mugshotbot.com/customize?utm_source=Newsletter-Campaign&utm_medium=%20Newsletter&utm_campaign=Frontend+Primary&utm_id=Cooper-Newsletter) [og:image as a Service](https://mugshotbot.com/customize?utm_source=Newsletter-Campaign&utm_medium=%20Newsletter&utm_campaign=Frontend+Primary&utm_id=Cooper-Newsletter) — Mugshot Bot creates stunning link previews automatically. No more fussing with design tools or wading through thousands of stock photos. Get started for free and take control over your links previews. Mugshot Bot sponsor [A Guide to Keyboard Accessibility: HTML And CSS](https://www.smashingmagazine.com/2022/11/guide-keyboard-accessibility-html-css-part1/) — A good set of practices and recommendations on how to use HTML and CSS to create a great experience for keyboard users, plus a look at what WCAG criteria we should keep into consideration. Cristian Diaz ▶[What's New in WCAG 2.2](https://www.youtube.com/watch?v=5yhL8q8hDMA) — An in-depth hour-long look at the recently published [Web Content Accessibility Guidelines version 2.2](https://www.w3.org/TR/WCAG22/) and the new success criteria. Note: _This is at candidate recommendation stage, so is subject to change_. Allison Ravenhall **⚡️ IN BRIEF** - Firefox 107 is out — [here are the developer-facing release notes](https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/107). - The Safari Web Extensions team is [holding an 'office hours' Q&A session](https://twitter.com/webkit/status/1592632156618371073) tomorrow and you can submit questions to them. - Carie Fisher has put together an excellent free [digital accessibility course](https://web.dev/learn/accessibility/) covering ARIA, HTML, color and contrast, and more. - The Opera browser has become the first to [include a built-in TikTok app](https://blogs.opera.com/news/2022/11/opera-desktop-tiktok/).. Yay? - Rachel Andrews [rounds up some of the interesting new features](https://web.dev/web-platform-10-2022/) that landed in browsers during October 2022. - This timeline shows [the evolution of CSS](https://css-timeline.vercel.app) over the past 25 years. 📙 **Tutorials, Articles & Opinion** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/plar6zjmj8hprvn5r1qh.jpg)](https://joshcollinsworth.com/blog/never-use-px-for-font-size) [Why You Should Never Use `px` to Set Font Size in CSS](https://joshcollinsworth.com/blog/never-use-px-for-font-size) — This has been a widely shared maxim over the years, but why? Josh covers this _“important, and poorly understood topic.”_ Josh Collinsworth [Web Sustainability Resources](https://css-irl.info/web-sustainability-resources/) — With the COP27 climate summit taking place, Michelle shares some resources for those in the web profession to use when assessing the ecological impact of our work. Michelle Barker [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1668605265/sk0ltvnrvp1jmqcw3kod.png)](https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/) [The Math Behind Nesting Rounded Corners](https://cloudfour.com/thinks/the-math-behind-nesting-rounded-corners/) — When nesting an element with a rounded corner inside of a rounded container it may not look quite right. Here’s what to do about it. Cloud Four [Send Email, Push and SMS with Smart Routing, with Just 8 Lines of Code](https://www.courier.com/?utm_campaign=cooper-press&utm_source=email&utm_medium=frontend-focus-11-16-sponsored-link&utm_content=homepage) — Send notifications from right within your application using the Courier API. One call, that's all, and send any template to any channel. Courier.com sponsor [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1668604091/g3c8dnyp6uuets6u3nvw.png)](https://www.smashingmagazine.com/2022/10/advanced-animations-css/) [How to Create Advanced Animations with CSS](https://www.smashingmagazine.com/2022/10/advanced-animations-css/) — Explains how to create a ‘rollercoaster’ path that a ball follows using cubic beziers and CSS transitions. You’ll also learn how the cubic-bezier function in CSS works in detail and how to stack multiple simple animations to create one complex one. If you’re just getting started with CSS animation, [this is a good primer](https://www.smashingmagazine.com/2011/09/the-guide-to-css-animation-principles-and-examples/). Yosra Emad [Why Are My `url()`s Not Resolving Correctly When Used as CSS Variables?](https://blog.andri.co/017-why-are-my-urls-not-resolving-correctly-when-used-as-css-variables/) — Reader Andrico sent us this one after seeing some odd behavior around variables and URLs. Here’s how to ensure your URLs get resolved correctly when used as CSS variables. Andrico Karoulla [The Anatomy of `visually-hidden`](https://www.tpgi.com/the-anatomy-of-visually-hidden/) — You’ve probably used `visually-hidden` content before. But how does the CSS actually work, and why do we use those particular properties? James Edwards [How to Create Slides with HTML and CSS](https://www.silvestar.codes/articles/how-to-create-css-only-slides/) Silvestar Bistrović [Classy and Cool Custom CSS Scrollbars: A Showcase](https://css-tricks.com/classy-and-cool-custom-css-scrollbars-a-showcase/) Saleh Mubashar 🧑‍💻 JOBS [Software Engineer](https://www.stickermule.com/career/6de4ccd8-7e58-4b65-9a25-62354972bdbd) — Join our "kick ass" team. Our software team operates from 17 countries and we're always looking for more exceptional engineers. Stickermule [Senior Frontend Engineer (San Francisco)](https://links.heyday.xyz/frontend-engineer-jd) — Build interfaces for an AI-powered research assistant that makes knowledge workers smarter. TypeScript, React, GraphQL. Heyday [Find Frontend Engineering Jobs with Hired](https://hired.com/join/?utm_source=newsletter&utm_medium=sponsor&utm_campaign=%28b2c%29%28l-all%29%28r-all%29%28cooper-frontendfocus%29&utm_content=find-your-next-job) — Create a profile on Hired to connect with hiring managers at growing startups and Fortune 500 companies. It's free for job-seekers. Hired 🔧 **Code, Tools & Resources** [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/v1668604953/moaycmgclvvqv9fwbked.png)](https://blog.getbootstrap.com/2022/11/11/bootstrap-icons-1-10-0/) [Bootstrap Icons v1.10.0](https://blog.getbootstrap.com/2022/11/11/bootstrap-icons-1-10-0/) — Features nearly 150 new icons, bringing the total to nearly 2,000. This release includes rockets, road signs, globes, taxis, and more. Mark Otto [LocatorJS: Click Any Component to Open Code in Your IDE](https://www.locatorjs.com/) — Available for use as a Chrome or Firefox extension or as a library. You can try it out directly on the tool’s home page by holding Alt (Option on Mac) then hovering over page elements. Michael Musil [Shortcut Brings Product and Engineering Together. Try It for Free](https://shortcut.com/?utm_source=cooperFRONTEND&utm_medium=spon_nl&utm_campaign=prospecting&utm_content=together) Shortcut (formerly Clubhouse.io) sponsor [Type Scale: A Visual Type Scale Calculator](https://type-scale.com/) — We've shared this before, but it remains a solid tool worth knowing about. Enter the base font size, select a scale (minor second, major second, etc.), along with a Google font option, and this tool will generate the results visually with copy/paste CSS. Jeremy Church [html.to.design: Figma Plugin to Convert Any Site into an Editable Figma Design](https://www.figma.com/community/plugin/1159123024924461424/html.to.design) divRIOTS (Figma Community) [Outstatic: A Static Site CMS for Next.js](https://outstatic.com/) — Very similar to Netlify CMS but specifically for Next.js and Vercel which stores content as files in GitHub. A beautifully designed homepage here, too. Andre Vitorio [![\](https://res.cloudinary.com/cpress/image/upload/w_1280,e_sharpen:60,q_auto/q8syeddpbsgu2kvihfyr.jpg)](https://github.com/mona-sans) [GitHub Unveils Two New Fonts: Mona Sans and Hubot Sans](https://github.com/mona-sans) — Two variable, open source fonts from GitHub. Here’s [the instructions](https://github.com/github/mona-sans#usage) for getting the variable font features working on your site if you choose to use them. GitHub 📬 **Got a new email address?** You can [change your email here](https://frontendfoc.us/edit_subscription/*|UID|*). --- **Bored of us?** Click [here to stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*). --- **Got a link for us?** Reply and tell us. We can't include everything but we'll take a look. --- Published by Cooper Press Ltd. Curated by [Chris Brandrick](https://twitter.com/chrisbrandrick) & [Peter Cooper](https://twitter.com/cooperx86). Fairfield Enterprise Centre, Louth, LN11 0LS, United Kingdom [Stop getting this newsletter](https://frontendfoc.us/leave/*|UID|*) [Ipx.](https://frontendfoc.us/open/568/*|UID|*?ipx=t)