Work out what to do with styled links in the notification banner component

What

Links in the error summary are red, because we target them in the component CSS:

https://github.com/alphagov/govuk-frontend/blob/2b7a162b0f915483190ad56b5b15c543b8cd36c9/src/govuk/components/error-summary/_index.scss#L39-L53

We’ve flagged in #1732 that this seems to break the BEM principles applied elsewhere, where we style things explicitly as elements using classes, rather than using tags in the selector.

From talking to @christopherthomasdesign, when we build the notification banner, we want to make the links red for the error variant and green for the success variant, so we’ll have a similar issue.

We should consider:

• that this is a valid use case to bend the BEM principles and using the same approach we use in the error summary
• creating error and success a link element and modifiers, scoped within the component (for example govuk-notification-banner__link govuk-notification-banner__link--error)
• creating error and success link modifiers (for example govuk-link govuk-link--error)

[vanitabarrett]

Changed approach on this while implementing as we noticed a difference in the way we were styling the notification header and text (based on a parent modifier class) vs links (having its own modifier class). We think it makes more sense for things to be consistent, and as this BEM guidance states it is allowed to style a sub-element based on a parent-element modifier. So we’ve essentially switched from option 2b to 2a

[hannalaakso]

@vanitabarrett Yes I think what the others have said makes a lot of sense about the dangers of different styles of conflicting. I think 2b is probably the best option. 2a sounds okay as well but it could be a little bit too “magic” to make it clear how the styles get applied.