Remove jquery-ui styling for tabs

tabs.js.coffee

$ ->
  jquery_ui_classes = [".ui-tabs", ".ui-tabs-nav", ".ui-tabs-panel", ".ui-widget", ".ui-widget-header", ".ui-widget-content", ".ui-corner-all", ".ui-corner-top", ".ui-corner-bottom", ".ui-helper-clearfix", ".ui-helper-reset", ".ui-state-default"]

  $(".js-tabs").tabs().each ->
    # removes all the jquery-ui specific classes (except ones like ui-state-active)
    $elements = $(this).find( jquery_ui_classes.join(", ") ).andSelf()
    $elements.removeClass( jquery_ui_classes.join(" ").replace(/\./g, "") )

tabs.sass

// using the new Sass 3.2 placeholder selector

%reset-jquery-ui-tabs
  .ui-state-active, .ui-state-hover, .ui-state-focus
    background: none
    border: none

.m-tabs
  @extend %reset-jquery-ui-tabs
  // ...

Why not just remove the UI tabs-related CSS from jQuery UI CSS file?

Good question! There are basically 2 reasons:

First, classes like "ui-widget" or "ui-border-all" are also used for all the other widgets so removing them would cripple them as well. The use case here is that you don't want to style your own datepicker or autocomplete (yet), but you probably want to style your own tabs (because they are really ugly).

Secondly, if you want to maintain upgradeability for future jquery-UI versions (although they don't come very often ;)) it's difficult to rip out the tab styles in a reproducible way.