csso
csso copied to clipboard
Remove declarations that are guaranteed overridden by specificity
There could be cases when some styles would surely override some other styles even if the selectors for those styles won't match.
-
html body {…}
would always overridebody {…}
, so you could throw away thebody
one.body{width:10px}html body{width:20px}
could be minified to justhtml body{width:20px}
. - The same would go in any case where the specificity of the selector containing both
html
andbody
is higher than with the one with only body. So in case we'd havehtml#js body
would always overridebody.class1.class2
etc. - The same would be also actual for
table
+tbody/tr/td
in different variations, sincetd
withouttable
don't make sense, andtbody + tr
are always created automatically. - There could be other similar cases, but most of them wouldn't be 100% safe (mostly because of crossbrowser issues), like using
:root()
,.class[class]
etc. - The same could be used for intersecting
:nth-child
s — there could be cases where some of them would contain previous ones. So,:nth-child(2n)
would always override:nth-child(2)
,:nth-child(4n)
and all other that would go before it. So,:nth-child(4n){width:10px}:nth-child(2n){width:100px}
could be minified to:nth-child(2n){width:100px}