search

WordPress / wporg-news-2021

The WordPress.org News Theme
https://wordpress.org/news/
31 stars 21 forks source link

Audit use of `!important` #25

Open iandunn opened 3 years ago

iandunn commented 3 years ago

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 https://github.com/WordPress/wporg-news-2021/commit/05ec95d16b4c2395d5680168785153cf4f8ff876, so those may not actually be necessary for us.

The only other I see is from https://github.com/WordPress/wporg-news-2021/commit/7241d17afdf33e030fd5ce58bb88ceac5784450b, and I'm guessing there's a good reason for it - cc @coreymckrill

coreymckrill commented 3 years ago

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 commented 3 years ago

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 commented 3 years ago

@kellychoffman @beafialho any recommendations here?

kellychoffman commented 3 years ago

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

iandunn commented 3 years ago

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 https://github.com/WordPress/wporg-news-2021/pull/30#discussion_r705556322, https://github.com/WordPress/wporg-news-2021/pull/30#discussion_r705625816