Debugging CSS like pro

A common mistake that I see among beginners is incorrectly targeting two classes at the same time in order to select an element. Consider the following:

<div class="alert success"></div>
<div class="alert danger"></div>


.alert.success { background-color: green; }
.alert.danger { background-color: red; }

First style will work with elements that have both .alert and .success classes, while the second one will work only with elements that have both.alert and .danger classes.

However, suppose we did the following:

.alert .success { background-color: green; }

The mistake here is adding a space between the two classes. There is a space changes the whole thing, and it won’t work. We are basically selecting an element with a .success class inside an element with an .alert class. It assumes an HTML structure like the following:

<div class="alert">
	<div class="success">
	</div>
</div>

Space matters.

/* case1 */
.alert.danger { background-color: red; }
<div class="alert danger"></div>

/* case2 */
.alert .success { background-color: green; }
<div class="alert">
	<div class="success">
	</div>
</div>

An Alternative to !important

.btn.btn { }

apply container colour to border colour by using currentColor

.element {
	color: #222;
	border: 2px solid currentColor;
}