It seems that how we write CSS can produce very bloated rules, even after minification. For instance: ```css .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 https://gitlab.com/gitlab-org/gitlab/-/merge_requests/90084#note_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.