🗂️ Guide to CSS Nesting - When and How?
Tags: css, performance, html, design
Published: 2023-10-13 09:06:32

**Hey everyone** ✌️ Here's a quick look at this week's newsletter:

⏩ Boost Page Speed with Efficient Ad Loading  
💫 Easy Guide to CSS Hover Effects  
🎯 Low-Quality Image Placeholders

Enjoy this weeks edition 👋 - Adam at Unicorn Club.  

___

> **Join 2,000+ People. Every Wednesday.**
> 
> **Carefully curated newsletter for developers, designers, and makers. 100% Free.**
> 
> [**Subscribe Today**](https://unicornclub.dev/?ref=devto)

___ 

#### [*Brought to you by Penpot*](https://unicornclub.dev/go/penpot-11-10-23)  

## The Design-Code Game Changer: Penpot’s Flex Layout

With Penpot, the open source design and prototyping tool, designers can easily create layouts with CSS-powered Flex Layout.

While developers enjoy ready-to-use code, designers gain more control over their creations and better tech understanding. This seamless workflow helps save time to everyone, making design projects faster and more efficient.

This isn't just a time-saver; it's a game-changer!

[**Try Flex Layout for Free**](https://unicornclub.dev/go/penpot-11-10-23)

----

### 🛠️ Resources & Tools

[**.classnames - Naming things needn’t be hard.**](https://classnames.paulrobertlloyd.com/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Find inspiration for naming things – be that HTML classes, CSS properties or JavaScript functions – using these lists of useful words.

[**Footer — The only footer gallery on earth.**](https://www.footer.design/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Footer is a curated gallery of the top website footer inspiration on earth. Find the footers you need and sort by type and style.

### 🏎️ Performance

[**Effectively loading ads without impacting page speed**](https://web.dev/loading-ads-page-speed/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Poorly implemented ads can lead to a slower browsing experience, frustrating users and diminishing engagement.

[**The Ultimate Low-Quality Image Placeholder Technique**](https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

Can Low-Quality Image Placeholders and LCP play nicely together?

### 🖌️ CSS

[**Re-Creating The Pop-Out Hover Effect With Modern CSS**](https://www.smashingmagazine.com/2023/10/re-creating-pop-out-hover-effect-modern-css-part2/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

A fancy hover effect where an avatar pops out of a circle on hover.

[**When to Nest CSS**](https://cloudfour.com/thinks/when-to-nest-css/?utm_source=unicornclub.dev&utm_medium=newsletter&utm_campaign=unicornclub.dev&ref=unicornclub.dev)

CSS nesting is great, but should be used with caution. As a rule, if a selector will work without being nested, don't nest it.

### 🔥 Promoted Links

_Share with 2,000+ readers, book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)._

[**FREE Remote Ticket for React Advanced London**](https://unicornclub.dev/go/react-advanced-london-11-10-23)

50+ talks about React, React Native, GraphQL, and TypeScript from the comfort of your home? Join over 5K React developers in the cloud at React Advanced London.

#### Support the newsletter

If you find Unicorn Club useful and want to support our work, here are a few ways to do that:

🚀 [Forward to a friend](https://preview.mailerlite.io/preview/146509/emails/101561590300542486)

📨 Recommend friends to  [subscribe](https://unicornclub.dev/)

📢 [Sponsor](https://unicornclub.dev/sponsorship)  or book a  [classified ad](https://unicornclub.dev/sponsorship#classified-placement)

☕️ [Buy me a coffee](https://www.buymeacoffee.com/adammarsdenuk)

_Thanks for reading ❤️  
[@AdamMarsdenUK](https://twitter.com/AdamMarsdenUK)  from Unicorn Club_