Exteranl CSS - Makes Code Fragile ?

[slaughters]

I've been having a debate with my self recently.

I write small transportable javascript functions and I find myself debating about using the ".className" or the ".style" property to style my DOM created objects.

If I use className then I can no longer post code or hand out a snippets that actually work by themselves. They have to be accompanied by a CSS file, which if lost will cause the code to break (often invisibly to the person trying to use it).

On the other hand, doing something like:

WhiteOutDiv.className = "someclassname";

is a heck of a lot easier than

        var currOpacity = 50;

        WhiteOutDiv.style.display = 'none';
        WhiteOutDiv.style.zIndex = "499";
        WhiteOutDiv.style.position = "absolute";
        WhiteOutDiv.style.filter = "alpha(opacity=" + currOpacity + ")"; // IE
        WhiteOutDiv.style.opacity = currOpacity / 100; // Firefox, etc..
        WhiteOutDiv.style.backgroundColor = "#ffffff";
        WhiteOutDiv.style.top = "0px";
        WhiteOutDiv.style.left = "0px";
        WhiteOutDiv.innerHTML = " "
        WhiteOutDiv.style.height= "100%";
        WhiteOutDiv.style.width = "100%";

[aj_nsc]

Are you asking a question?

Don't be ridiculous, use .className

If you are posting code or handing out snippets then send along the proper css file with it. If the person who is obtaining this code/snippet doesn't know how to use a css file (or follow simple instructions on how to use it), then looking at javascript code is a moot point for them.

[slaughters]

It's not that black and white.

External CSS is fine when you have tight control over everything, but when you release your code into "the wild" it can make it more fragile.

I've had the CSS in external files get modified by 3rd parties, "breaking" my functions when I have used className.

I've had customers move to new sites and not porting over all their CSS files, "breaking" the functions I wrote which depended on className assignments.

I've had customers consolidate several CSS files into one and had inheritance rules break functions which relied on className

None of these problems would have happened if I had used the ".style" property instead.

[Fang]

I'd stick with .className, although you could use shorthand style:

WhiteOutDiv.style.cssText+="display:none;z-index:499;position:absolute;";

[slaughters]

I want to use className as it makes things easier for me to make changes later on.

You would think that using classNames would make it the more flexible approach, but I found that if I am creating components to be used by people who are primarily server side or DB developers that they have a poor to weak understanding of CSS (or of client side altogether).

Instead of making it easier for them to use, I am making it harder. They now have to learn yet another language, along with keeping up with the quirks and spotty support CSS has in different browsers.

I just wish there was a way to black box the approach to using JS with CSS classnames. Their current separation reminds me of the old programming days when the user had to edit the config file with notepad if they wanted to change how anything worked. A bit of the horrible user experience there.