.bg-c {
background-color: #ffe8a5;
}
.bg-d {
background-color: #faaaa4;
}
.bc-a{
border-color: #2196f3;
}
.bc-b {
border-color: #4caf50;
}
.bc-c {
border-color: #ffc107;
}
.bc-d {
border-color: #f44336;
}
.br-1x {
border-radius: 10px;
}
.bw-2x {
border-width: 2px;
}
.bss {
border-style: solid;
}
.sans {
font-style: sans-serif;
}
.p-1x {
padding: 10px;
}That’salotmoreCSS.Let’snowrecreateourerrormessagecomponent.Using
AtomicCSS,ourmarkupbecomes:<p class="bw-2 bss p-1x sans br-1x bg-d bc-d">
An error occurred.
</p>Ourmarkupisalsomoreverbose.Butwhathappenswhenwecreateawarning
messagecomponent?90 CSS Master