In css, why do we repeat some of the class names and style them separately?

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

Thnank for your patience man, u r awesome :+1: :+1:, great explanation @mikoMK.

1 Like