All examples

Building blocks > Layers
Easier to override third parties

When your app uses third party CSS, you don't want your efforts to customise to turn into fighting the third party styles.

One way to make that much easier, is to put third party styles into their own layer, right when you import them.

Example code

							<style>
@import 
  url("https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css") 
	layer(bootstrap);

@layer bootstrap, our-stuff;

@layer our-stuff {

	/* this wins from Bootstrap */
	.breadcrumb-item.active {
		color : #f60;
	}
}

/* anything here *also* wins from 
   Bootstrap (because non-layered) */

</style>

<nav aria-label="breadcrumb">
	<ol class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">Home</a></li>
		<li class="breadcrumb-item"><a href="#">Library</a></li>
		<li class="breadcrumb-item active" aria-current="page">Data</li>
	</ol>
</nav>

Preview