1. 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

Discussion in 'Resolved Bug Reports' started by CyberAP, Mar 29, 2013.

  1. CyberAP

    CyberAP Well-Known Member

    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:

    Menus: #XenForoUniq
  2. Mike

    Mike XenForo Developer Staff Member

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

    CyberAP Well-Known Member

    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.
  4. CyberAP

    CyberAP Well-Known Member

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

    Chris D XenForo Developer Staff Member

    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.
  6. CyberAP

    CyberAP Well-Known Member

    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.

Share This Page