The unseen performance costs of modern CSS-in-JS libraries in React apps

Aggelos Arvanitakis, writing for the Web Performance Calendar 2019 edition: Besides some of the great advantages CSS-in-JS boasts over traditional CSS, it may still create performance issues in certain apps. In this article, I will attempt to demystify the high-level strategies of the most popular CSS-in-JS libraries, discuss the performance issues they may introduce on […]

Smoother & sharper shadows with layered box-shadows

If you try to capture the subtleties of a real shadow with box-shadow then, well, you’re pretty much out of luck. The box-shadow CSS property isn’t exactly built to encourage expressiveness. But with a simple CSS technique, we can expand our range of options. If we use layered box-shadows we can get more fine-grained control […]

How the CSS :is() selector will simplify things

One of the selectors in CSS Level 4 is :is(). It is the successor to :any() and :matches() (which are supplanted by :is()): The :is() CSS pseudo-class function takes a selector list as its argument, and selects any element that can be selected by one of the selectors in that list. This is useful for […]

Fullwidth Content Strips and CSS Subgrid = ❤️

When having fullwidth content strips on your site CSS Grid is a thankful piece of technology. You can use it to place items between the first and last grid-line, as detailed in Breaking Elements out of Their Containers in CSS 💁‍♂️ Alternatively you can also use this .full-bleed utility class To lay out the content […]

Emulate Dark Mode using Chrome DevTools

Coming to the next version of Chrome is a way to emulate “Dark Mode” using the DevTools. With the DevTools open and focused, hit SHIFT+CMD+P and choose “Emulate CSS prefers-color-scheme: dark” from the menu You can also access the option via the Rendering panel. (Via @ChromeDevTools)