canonical
.p-heading-icon element classes work outside of the block
The internal elements of the heading icon pattern work without being nested within its block class. For example .p-heading-icon__img.
This leads to people using them as utilities which results in untested and unexpected styling.
I don't think we ever had a rule that internal elements should have nested selectors. If there was such a rule it was not stated anywhere and is clearly not followed in some cases.
But I would argue that it's not a bad thing. The idea behind BEM naming convention is to create class names that clearly state their component 'membership' by 'element' part of the class. This way we can have simpler (single class) CSS selectors. This results in less CSS (shorter selectors), better performance (shorter CSS to parse and simpler selectors to interpret) and more maintainable specificity (ideally all selectors would be just one class).
Yes, this may result with people using some 'internal' class names outside of their patterns, which is not ideal, but I wouldn't say it's completely wrong. What it says about this class name is that it works well on its own (regardless of being part of the pattern). And apparently it's useful, so maybe we should think about extracting it to being pattern itself. Or at least verify the context where it's used and modify p-heading-icon pattern to be useful in these contexts as well.
Personally I think we should not make internal component class names depend on being inside the root class, because it results in more complex CSS (especially if the root element can have several variants, which multiplies all the selectors).
But if we think that being more strict to prevent people from using these class names in unexpected ways is more important than we should start to write down such coding conventions for ourselves and make sure we follow them, as things like that may not be easy to catch with linting.
There's an interesting take on this by Harry Roberts, who has thought of a way to keep the specificity graph flat too.
We discussed it in Vanilla catch-up. We decided that we should restrict this in Vanilla and scope the pattern classes by nesting the selectors.
The heading icon mentioned in this issue is only one of those, so we should also identify others. Because nesting the selectors may lead to breaking changes we should search our projects and try to find places that may be affected.
Estimating as 8, because it's likely to become an epic that includes changes to several patterns.