What are the purpose of the ".ui.ui" and ".ui.ui.ui" CSS selectors?

[pbernery]

Question

I just saw the diff between 2.7.5 and 2.7.6 and discovered that the menu collection uses .ui.ui and .ui.ui.ui prefix for CSS selectors.

I found this quite strange and wonder what it is meant to do?

[lubber-de]

This is used to increase controlled and reproducable specificity to avoid using !important

[pbernery]

I see. Didn't know this CSS trick before.
Thanks for the feedback.

I'm quite astonished though there is this trick in the framework, whereas some other parts are using !important. Anyway, I would expect the framework to neither use !important or have this trick, seems like there is something wrong in the structure of the components, but I may not have understood everything about this subject.

Is there a kinda rule to choose !important or the heavier selector? Or an ongoing migration to this technique instead of !important?

[lubber-de]

We actually already removed lots of !important by v2.7.0 when we refactored the color generation of components.
All the remaining !important you mentioned are leftovers from the original SUI where FUI is forked from.
I totally agree with you to remove as many, possibly all, of them, but we are doing this whenever we are working on a component or doing bugfixes, because whenever you remove one, all override options have to be considered and tested as well. Unfortunately not an easy task as you might think, but we already came quite far (in comparison to SUI 2.4.1)

[pbernery]

I see.
So the right thing to do if proposing a PR is to use this trick and if possible remove !important.

Thanks for the feedbacks and the details :)

[pbernery]

I close this issue now that it's clearer.