All examples

Building blocks
Real world nesting opportunities

These are some ways where nesting could make your code more readable or understandable.

Keeping states together

If an element slightly varies on hover and focus (which it should in most cases), it could make sense to add those styles right with the element styles.

Example code

							<button>Save</button>

<style>
button {
  color: blue;
	background-color: white;
	border: 1px solid currentcolor;
	padding: 1em 2em;
	
	&:hover {
	  color: red;
	}
	
	&:focus {
	  color: black;
	}
}
</style>

Preview

Media queries

Maybe you want a card to look different based on media queries. The query could go right with the component.

Example code

							<div class="card">
</div>

<style>
.card {
  width: 50%;
	aspect-ratio: 1 / 1;
	background-color: orange;
	
	@media (min-width: 200px) {
	  background-color: black;
	}
}
</style>

Preview