www.webdeveloper.com
Results 1 to 5 of 5

Thread: Exteranl CSS - Makes Code Fragile ?

  1. #1
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374

    Exteranl CSS - Makes Code Fragile ?

    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:
    Code:
    WhiteOutDiv.className = "someclassname";
    is a heck of a lot easier than
    Code:
            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%";

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    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.

  3. #3
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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.

  4. #4
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    I'd stick with .className, although you could use shorthand style:
    Code:
    WhiteOutDiv.style.cssText+="display:none;z-index:499;position:absolute;";

  5. #5
    Join Date
    Apr 2006
    Location
    Houston
    Posts
    1,374
    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.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles