Forums

What exactly are the guidelines for JavaScript component CSS? the procedure for skinnable modules is pretty clear from the build process but there are a few inconsistencies.

A skinnable JavaScript component has a base CSS file that can have "per skin" specialisations. The specialised skin CSS is concatenated to the base CSS and then overwritten and minified. But the core CSS still finds it's way to the final product. The compressed skin CSS file does not have the "-min" suffix like the compressed CSS for a "CSS only" module.

What about compressed CSS for non-skinnable JavaScript components?

When the YuiLoader is pulling down components, I assume (if fetchCSS is true) that the YuiLoader also pulls down the relevant skin css for the components it is loading. If a cssmodule (e.g. cssgrids), is included in the component list for YUI().use(...), then I assume the configured filter (e.g. "minify") is respected and it pulls down cssgrids-min.css. I guess what I was trying to point out was that it seems inconsistent that the filter is respected for cssmodules, but is not for CSS assets of a js component.

When I referred to "non-skinnable JavaScript components", I mean when "component.skinnable=false". Does the YUILoader attempt to any CSS at all for these modules? Can a JavaScript module have CSS that only contains CSS relevant to the "structure essential to the component" without the need for any "cosmetic aspects such as color, imagery and typography" in a separate skin file? If so, I would assume that a JavaScript component with only CSS essential for the structure of the component should only be present and should follow the -core naming convention?

The reason I ask is: we are having to take ownership of loading CSS (by disabling fetchCSS) to work around a problem with IE where only the first 30 link tags are honoured.