Not a bug Inline CSS code === bad

[CyberAP]

Inline CSS code is really bad for developers. We had to come up with selectors like this:

#moderatorBar .visitorTabs .itemCount[style*="display: inline;"]

It is an actual code from one style of mine.

Please trigger all the actions via classes, otherwise we will go into !important hell.

Elements that use inline CSS that I had to customize so far:

#AlertsMenu_Counter
#ConversationsMenu_Counter
Menus: #XenForoUniq

 

[Mike]

Showing and hiding is done via JS and will always be added directly otherwise we'd need to use !important anyway.

 

[CyberAP]

We could just append a class and increase class specificity in CSS. Inline CSS is bad because there is no way to overwrite it by not using !important.

 

[CyberAP]

Again, this is not fixed. This is not a JS issue, it is a design flaw.

 

[Chris D]

The result is the same. Inline CSS is used to show and hide elements using jQuery. The alternative is to add/remove class that contains display: none but chances are this would require !important to be effective. And that is why it won't make the slight bit of difference. To override either, you would still need to use !important yourself.

 

[CyberAP]

I never use !important if I can add more specificity to the selector. The same can be done with any selector in XF. !important and inline CSS is a really bad practice and definitely shouldn't be used in a framework like XF. I can understand when we use inline CSS with dynamic numeric properties (like transform: translate3d(); ) but when we trigger display property from inline to block there is no need for inline CSS here.