Question

jQueryUI provides a convenient css framework: http://jqueryui.com/docs/Theming/API

Just by using jQueryUI’s CSS classes (ui-widget-content, ui-widget-header, etc), you can easily create html-snippets that are themeable via http://jqueryui.com/ThemeRoller

A feature what I’m sometimes missing in designing my apps, is to reuse a css property from jquery-UI’s CSS classes, but not all of the properties. Simple reuse is possible by using none !important.

For example, when you only want to get the foreground color of .ui-widget-content without backgrounds or borders, you could just do:

<style>
.no-background { background: none !important; }
.no-border { border: none !important; }
</style>
<div class="ui-widget-content no-background no-border">
  hi world :)
</div>

But, is there a simple way to get the background-color of .ui-widget-header and reuse it in my own CSS classes as color ?

I made a somewhat quick and dirty solution for this: filling a style tag using JavaScript and DOM manipulation.

JSBin: http://jsbin.com/ijuxar/7/edit

HTML Code:

<style class="computedStyles"></style>
<div class="cssHelper ui-helper-hidden-accessible" style="visibility: hidden">
  <div class="ui-widget-header"></div>
  <div class="ui-widget-content"></div>
  <div class="ui-state-default"></div>
  <div class="ui-widget-header ui-state-active"></div>
  <div class="ui-widget-header ui-state-hover"></div>
</div>
<h1 class="ui-color-2">Hi World</h1>

JS Code:

$(document).ready(function () {
  var css= '', i, colors = [
      $('.cssHelper .ui-widget-content').css('color'),
      $('.cssHelper .ui-widget-header').css('background-color'),
      $('.cssHelper .ui-state-hover').css('background-color'),
      $('.cssHelper .ui-state-default').css('background-color'),
      $('.cssHelper .ui-widget-header.ui-state-active').css('background-color')
  ];
  for (i = 0; i < colors.length; i += 1) {
      css += '.ui-color-' + (i + 1) + ' { color: ' + colors[i] + '}\n';
  }
  $('style.computedStyles:first').text(css);
});

I feel that the JavaScript solution is somewhat evil. Furthermore, it causes a FOUC in some browsers.

Is it possible to get it done with plain CSS and/or with serverside tools (SASS/LESS/…)?

Answer 1

CSS stands for Cascading Style Sheets. which means styles set by classes will “cascade”

So if you have your own css file, and include it AFTER the jquery css. It will over ride the jquery css. Likewise, if you attach 2 classes to an html element, the 2nd classes styles will over-write the first ones.

the other way to over write specific styles of a css class, is to use the !important indicator on your css. something marked !important will not be over written by something that isn’t no matter what order they appear in.

So to answer your question. In your own css file, have your class that specifies the color like so:

.myColour{
    background-:none!important;
    border:none!important;
}

and class your element like so:

<div class="ui-widget-content myColour" >
  hi world :)
</div>