How to selectively load/use CSS for YUI modules?

Question

I use the following code to load YUI modules.

YUI().use('tabview', 'datatable', 'datasource-local', 'node', 'node-load', function(Y) 
{ 
    ......
});

This would load the modules and ALL of the respective CSS files.

But I want to use the CSS selectively. Let's say I don't want to load CSS for TabView. How can I achieve that?

I tried the following -

YUI({ fetchCSS: false }).use('tabview', 'datatable', 'datasource-local', 'node', 'node-load', function (Y) 
{
    ......
});

Its obvious that the above code would not load CSS files for any module. How can I disable CSS for tabview so that I can use my own?

Answer 1

There is 'override' property in the skin config. That allows you to use differents skin for some modules.

You may create a skin with your own css file, and tell the loader to use this skin for the module you want (tabview in your example).

I'm not sure you can have different source folder for the differents skins though.

http://yuilibrary.com/yui/docs/api/classes/config.html#property_skin

You can also try to define a css module and 'use' it.

http://yuilibrary.com/yui/docs/api/classes/config.html#property_modules

I hope it helps you!