Audit use of !important

[iandunn]

We have a lot of instances where !important is used, and I've already run into a case where that's causing a problem.

Most of them appear to be from 05ec95d, so those may not actually be necessary for us.

The only other I see is from 7241d17, and I'm guessing there's a good reason for it - cc @coreymckrill

[coreymckrill]

The usages in 7241d17 are necessary to override some !important rules that are generated and output by Gutenberg (or maybe Core?) based on the contentSize and wideSize values set in theme.json.

I'm guessing the ones that came from Blockbase are there for a similar reason...

[iandunn]

I haven't noticed any side effects from 2d83fbf, so i think in some cases the blockbase ones aren't relevant to our custom design. in general, i suspect there may be a lot of blockbase styles that go unused. IIRC Lighthouse will identify rules that aren't used on any page, so we could run that before the launch.

in some cases i've be able to override the container-{hash} styles by using a more specific selector instead of !important, or by removing layout: inherit from the block comment. not sure if that'd work w/ 7241d17 though.

[tellyworth]

@kellychoffman @beafialho any recommendations here?

[kellychoffman]

Not sure the best approach here - will lean on theme devs for help with this.

[iandunn]

Lately I've been using selectors like .query-navigation-container[class*="wp-container-"] to gain a higher specificity than Gutenberg's layout styles, and that's been working well.

That may still be a symptom of a deeper problem, though, like hardcoding styles instead of taking advantage of things Gutenberg could automatically if we knew how to leverage that.

xref #30 (comment), #30 (comment)