Abuse of !important in theme styles

[alicexyl]

REQUIRED INFORMATIONExt version tested:

• Ext 4.1.0

Browser versions tested against:

• Chrome
• IE8/9

DOCTYPE tested against:

• irrelevant

Description:

• In styling framework code, !important flags used in places that don't seem necessary. e.g. See it used in grid icon styles:
  

      //grid icons
      .#{$prefix}tbar-page-first {
          background-image: theme-background-image($theme-name, 'grid/page-first.gif') !important;
      }
  
  
      .#{$prefix}tbar-loading {
          background-image: theme-background-image($theme-name, 'grid/refresh.gif') !important;
      }

  toolbar bg styles:
  

      @if not $supports-gradients or $compile-all {
          @if $background-gradient != null {
              .#{$prefix}nlg {
                  .#{$prefix}toolbar-#{$ui} {
                      background-image: theme-background-image($theme-name, 'toolbar/toolbar-#{$ui}-bg.gif') !important;
                      background-repeat: repeat-x;
                  }
              }
          }
      }

• This makes it harder for us to write rules to override those bg with our own, since we have to put !important to beat the specificity. Also it's impossible to use Compass spriting mixins to override those icons.

Possible fix:

• Remove !important flags in framework code to make code more extensible and reduce specificity wars.

Operating System:

• Win 7

[evant]

I doubt we'll be able to remove them all, but it's something worth looking into.