For ex, in the link above, the block class and the ul are styled 2 times,once done with another element added,and the other without the element. Why we do this?
Just a brief explanation is needed in order to understand better.
That’s just done so we don’t have to repeat ourselves and to see which elements have the same base styling. If two elements need the same we put them together and use additional selectors for the things that differ. For example:
.success,
.error {
border: 5px solid grey;
font-weight: bold;
margin: 10px;
padding: 5px;
}
.success {
background-color: green;
}
.error {
background-color: red;
}
This second code does the same, but it’s much harder to see that the only difference between .success
and .error
is their background color.
.success {
background-color: green;
border: 5px solid grey;
font-weight: bold;
margin: 10px;
padding: 5px;
}
.error {
background-color: red;
border: 5px solid grey;
font-weight: bold;
margin: 10px;
padding: 5px;
}
I hope that helps,
Michael
1 Like