CSS Designer and DOM scripter, sitting in a tree

scriptstuff={

 // CSS classes 
  hideClass:'hide',                // hide elements
  currentClass:'current',  // current navigation element
  hoverClass:'over',           // hover state 

  [... lots of dark magic, voodoo and other code...]
}

css={
  'hide':'hide',                // hide elements
  'current':'current',  // current navigation element
  'hover':'over',           // hover state 
[... and so on for a lot of them...]
}

/* hide */ .hide{
[... CSS settings ...]
}
/* current */ .current{
[... CSS settings ...]
}
/* warning */ .warning{
[... CSS settings ...]
}

if(!document.getElementById || !document.createElement){return;}
cssjs('add',document.body,'jsenabled');

#nav li{
  [...settings...]
}
body.jsenabled #nav li{
  [...settings...]
}

6 Responses to “CSS Designer and DOM scripter, sitting in a tree”

1. volkan ozcelik Says:
   February 21st, 2006 at 8:42 am

   Would it be more useful to have two totally separate style sheets, like lowstyles.css and highstyles.css

   I currently use a similar approach. I have a basic global css (Master.css).
   And I attach advanced css properties, which only make sense when js is enabled, via DOM-scripting.

   Users with js-disabled see my Master.css only and do not download the utility css as it does not makes sense for a non-js environment.

   Regarding the use of object literal, I have adopted a few sets of rules:

   For each page, I have a common.js and page-specific js file.

   common.js
   ———
   function init(){
   if(typeof PageName != “undefined”)
   {
   PageName.init();
   }
   };
   EventHandler.addEventListener(window,”load”,init);

   PageName.js
   ———
   var PageName={
   init:function{
   … page initialization code goes here …
   }
   };

   So in order to add the css object literal, I would have used something like:

   common.js
   ————
   var Master={
   css:{
   /* global css properties */
   hide:’hide’,
   current:’current’,
   hover:’over’
   }
   }

   and in PageName.js

   PageName.js
   ———–
   var PageName={
   init:function{
   … page initialization code goes here …
   },
   css:{
   /* page-specific css properties */
   }
   };

   Being organized is not overkill and it shows its fruits on the long run imho.

2. Chris Heilmann Says:
   February 21st, 2006 at 8:50 am

   Hi Volkan,
   this is very obvious to someone who knows JS a lot. However, it seems that you scatter the classes over a lot of documents. Have you used this is in a big project with lots of non-js-savvy designers?

3. ben Says:
   February 21st, 2006 at 11:11 am

   For ease of use, I think it would be best if they were in their own file like cssclasses.js slight overkill but that way even junior developers could make changes and not ruin the rest of the js file. I’m not sure what the JSON link is though – object not found.

   Would it be more useful to have two totally separate style sheets, like lowstyles.css and highstyles.css

   I don’t think that’s neccessary – unless we are talking about big css files. Its helpful to compare the differences in CSS when they are next to each other in the same file and you can just add the extra CSS to the enabled version.

   ben

4. volkan ozcelik Says:
   February 21st, 2006 at 11:26 am

   Yes, I used the approach in a big project.

   But my advantage was that the team happened to know advanced enough js to handle things.

   I am currently using the approach in a project of my own.

   I suppose some level of expertise is required nonetheless.

   However, if you clearly explain the folder and object hierarchy of the project to the (non-js savy) design team, it will not be a big trouble anyway.

   In any team where skillsets are not evenly distrubuted, a careful lead is a must anyway.

5. Hugh Says:
   July 2nd, 2007 at 3:44 pm

   Hi there

   I’m having some difficuties styling anchor text in an element with the DOM, because my anchor styling uses a class instead (the number of anchors is unlimited in this element) Basically, I am able to change dynamically the color of my text, because it has a single ID, but not to several anchors within this element (works with the first link only, but not the following. Ideally, I would like to have something that works like a document.getElementByClassName.

   Possiblle

   document.getElementByID(‘thetext’).color =’#'+ document.getElementByID(‘i(‘textHEXcolor’).innerHTML;

6. Hugh Says:
   July 2nd, 2007 at 4:45 pm

   in my last post, it shoudl read instead

   document.getElementByID(‘thetext’).color =’#’+ document.getElementByID(‘textHEXcolor’).innerHTML;