Seems that some of the ordering mattered in a couple of places. A couple of the ones I found

Account Details Button Width

.hide-token-confirmation__button, .button width and padding over .account-details-modal__button width padding

Tx List Item tx category color

.list-item color over .transaction-list-item--unconfirmed' color`

Tx Details Speed Up and Cancel font size

.hide-token-confirmation__button, .button font-size over .transaction-list-item-details__header-button font-size

Send Token button on asset list item

button.scss font-size over .asset-list-item__send-token-button font-size
.hide-token-confirmation__button, .button display and width over .asset-list-item__send-token-button display and width

I think these are from the old design and can be removed?

Buy button width

.hide-token-confirmation__button, .button width over .eth-overview__button, .token-overview__button width

Would we just tack an !important for the individual cases?

@tmashuang thank you for finding those! I'll go through and review why the import order caused this to break as it likely means we are relying on styles from unrelated files which most likely is causing more heartaches than fixing things.

@tmashuang - we can avoid !important; by making our css selectors more specific, in this case .button and .hide-token-confirmation__button are equally specific they are both just a single class name. It's important to note that the way we are using BEM is actually making it so that our "nested" scss isn't really creating nested selectors.

.some-class {
  .child {
     font-size: 16px;
  }
}

compiles to

.some-class .child {
  font-size: 16px;
}

whereas

.some-class {
  &__child {
    font-size: 16px;
  }
}

compiles to

.some-class__child {
  font-size: 16px;
}

In some cases here I am adding an additional ampersand to get the nested effect

.some-class {
 & &__child {
  font-size: 16px;
 }
}

compiles to

.some-class .some-class__child {
  font-size: 16px;
}

as we would hope.

I added a commit that resolves those specific issues. I'm looking through the extension now to see if i can find anymore. I did end up pulling out the mixins created ad-hoc in the buttons scss file and converted everywhere they were being used to consume the button component instead. These will likely need to be reviewed carefully for breaking changes

Ready for another look @tmashuang. Thank you 🙏

As it turns out, not nesting CSS seems to be the philosophy of BEM. I can achieve the same specificity by changing & &__element to &__element .sub-block. Either or is fine for this work, but I'll be researching BEM and how we might codify our usage of it.