Question: For the following use-case, what BEM convention do we use?

[egucciar]

Note: we use -- to denote a modifier

We have a situation where we have a selection__control element that lives within a selection block. This class does not create much style on the element it applies to, but rather creates styles for ::before and ::after to create an appearance of a radio or checkbox control (which are applied with a modifier, i.e. selection__control--checkbox). We have another class, which we're undecided about naming. We do not know if it should be an element, block, or modifier. the class, selection__tile, can be used in tandem with the selection__control to create an appearance of a tile around the control. Since the selection__control primarily targets befores & afters it can be composed really easily with selection__tile since tile affects the element it is styling. This means selection__tile can also be used outside of the selection__control use case. Meanwhile, the use cases for both elements can be really similar. On one hand, selection__tile can be seen as a modifier of the control when used with the control (selection__control--tile). On the other hand, when used outside of the control, it can be seen as a block.

When it is unclear if a class should be a block, element, or modifier since it can be both, what is the recommendation? At this point, we're considering just calling it a modifier, and not suggesting to use the selection__control--tile class outside of the control use case, but it feels like an artificial limitation do to the nature of how we conceive of these things and name them.