system,youcantellwhattheclassnamedoes;butthereisnorelationshipbetween
classnames—atleast,notthoseusedinthestylesheet—andcontenttypes.
Let’sillustratewithanexample.Belowisasetofrulesinwhatwemightcalla
conventionalCSSarchitecture.Theserulesetsuseclassnamesthatdescribethe
contenttowhichtheyapply:aglobalmessagebox,andstylesfor“success,”
“warning,”and“error”messageboxes:
.msg {
background-color: #a6d5fa;
border: 2px solid #2196f3;
border-radius: 10px;
font-family: sans-serif;
padding: 10px;
}
.msg-success {
background-color: #aedbaf;
border: 2px solid #4caf50;
}
.msg-warning {
background-color: #ffe8a5;
border-color: #ffc107;
}
.msg-error {
background-color: #faaaa4;
border-color: #f44336;
}Tocreateanerrormessagebox,we’dneedtoaddboththemsgandmsg-errorclass
namestotheelement’sclassattribute:
<p class="msg msg-error">An error occurred.</p>Let’scontrastthiswithanatomicsystem,whereeachdeclarationbecomesitsown
class:
.bg-a {
background-color: #a6d5fa;
}
.bg-b {
background-color: #aedbaf;
}CSS Architecture and Organization 89