Investigate compiled CSS size

It seems that how we write CSS can produce very bloated rules, even after minification. For instance:

.gl-button.gl-button.disabled .gl-button-icon,
.gl-button.gl-button.disabled:hover .gl-button-icon,
.gl-button.gl-button.disabled:focus .gl-button-icon,
.gl-button.gl-button.disabled:active .gl-button-icon,
.gl-button.gl-button.disabled.selected .gl-button-icon,
.gl-button.gl-button[disabled] .gl-button-icon,
.gl-button.gl-button[disabled]:hover .gl-button-icon,
.gl-button.gl-button[disabled]:focus .gl-button-icon,
.gl-button.gl-button[disabled]:active .gl-button-icon,
.gl-button.gl-button.selected[disabled] .gl-button-icon,
.gl-button.gl-button.btn-block.disabled .gl-button-icon,
.gl-button.gl-button.btn-block.disabled:hover .gl-button-icon,
.gl-button.gl-button.btn-block.disabled:focus .gl-button-icon,
.gl-button.gl-button.btn-block.disabled:active .gl-button-icon,
.gl-button.gl-button.btn-block.disabled.selected .gl-button-icon,
.gl-button.gl-button.btn-block[disabled] .gl-button-icon,
.gl-button.gl-button.btn-block[disabled]:hover .gl-button-icon,
.gl-button.gl-button.btn-block[disabled]:focus .gl-button-icon,
.gl-button.gl-button.btn-block[disabled]:active .gl-button-icon,
.gl-button.gl-button.btn-block.selected[disabled] .gl-button-icon {
    fill: #868686;
}

This was noticed in gitlab-org/gitlab!90084 (comment 992219389).

Questions

Does this matter?

• Modern browsers parse CSS incredibly fast, such that this would never feasibly be a bottleneck.
• We serve assets with gzip(?) compression, which should compress rules like the above really well.