Eric Polerecky

I find that DRY is the most underused understated TLA in application development today. Even when dealing with developers that come from a model-driven architecture (the java developers I work with).

Professor Wikipedia has this to say about DRY:

The DRY code philosophy is stated as “Every piece of knowledge must have a single, unambiguous, authoritative representation within a system.”

And

When the DRY principle is applied successfully, a modification of any single element of a system does not change other logically-unrelated elements. Additionally, elements that are logically related all change predictably and uniformly, and are thus kept in sync.

Ok, back to me and my um…”wet” css. Here is a snippet from our central CSS repository. You see we all use the same central CSS files….good in theroy…not sure about it in practice yet.

What a wasteful use of bits…

   1:  .textXXSmallRed {

   2:  color:#FF0000;

   3:  font-family:verdana,arial,helvetica,sans-serif;

   4:  font-size:xx-small;

   5:  font-weight:normal;

   6:  }

   7:   

   8:   

   9:  .textXXSmallRedBold {

  10:  color:#FF0000;

  11:  font-family:verdana,arial,helvetica,sans-serif;

  12:  font-size:xx-small;

  13:  font-weight:bold;

I know, I know…the naming is far from Structural naming convention. And what would happen if we need to change all the side-bar links from red to blue…global search and replace….sounds like fun….but this post is about DRY!

   1:  <span class="bold red xxsmall">here is my text</span>

Again with the poor naming…I know already! lets try to stay on the DRY topic. The code above shows how multiple classes can be applied to an element. The CSS is then much easier to manage…also, IMHO, its more human readable.

Ok, enough venting…back to work…

CSS, DRY

If the parent container of a dojox.grid.Grid has its style set to text-align:center the rows of the grid, in IE, won’t display their data. The data, of course, is still there and displays correct in everything else.

Code Snip:

   1:  <h2>Working</h2>

   2:         <div id="dojoxGrid" dojoType="dojox.Grid" jsId="dojoxGrid" structure="layout"></div>

   3:      <h2>Not Working (in IE)</h2>

   4:      <div style="text-align:center;">

   5:          <div id="dojoxGridError" dojoType="dojox.Grid" jsId="dojoxGridError" structure="layout"></div>

   6:      </div>

Demo: http://eric.polerecky.com/dojoGrid/

CSS, Dojo, IE