• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

Not a bug Inline CSS code === bad

CyberAP

Well-known member
#1
Inline CSS code is really bad for developers. We had to come up with selectors like this:

Code:
#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

XenForo developer
Staff member
#2
Showing and hiding is done via JS and will always be added directly otherwise we'd need to use !important anyway.
 

CyberAP

Well-known member
#3
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.
 

Chris D

XenForo developer
Staff member
#5
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

Well-known member
#6
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.