Thursday, July 3, 2008

A place for everything, and everything in it's place (Fun with CSS)

Well if you saw my garage, you know I should be the last one talking about this, maybe I use up all my organizational energy on the code I write?
Anyway, in a project I've been working over the past year or so, I've been using the ASP.NET Themeing concept along with CSS to build a "skinnable" product.  Skinning will for the most part be accomplished via CSS.  As I've been adding features, I've sort-of hacked together the required CSS as a new feature was added.  These were organized into different areas, and named appropriately, but as I started to build additional themes, it just got fairly complex making sure everything got lined up and styles didn’t get messed up in different CSS’s.

Here is an example of my original CSS for section of the application, imagine there are about 12 other sections similar to this

/* -------- Edit Panel ------------ */
div.edit-panel {border:1px solid #AACCEE;text-align:left;width:400px;background-color:white}
div.edit-panel-header {background-color:#EBF3FB;border-bottom:1px solid #AACBEE;margin:0pt 0pt 6px;padding:3px 6px;}
div.edit-panel-header-tight {background-color:#EBF3FB;border-bottom:1px solid #AACBEE;padding:3px 6px;}
div.edit-panel-header span{color:#07519A;font-family:Verdana;font-weight:bold;}
div.edit-panel-header-tight span{color:#07519A;font-family:Verdana;font-weight:bold;}
div.edit-section {padding:4px;font-family:Tahoma;font-size:9px}
.edit-section-caption {display:block;font-weight:bold;padding-left:5px;color:#07519A;font-size:1.2em;font-family:Verdana}
div.edit-section-save-bar {text-align:right;padding-left:4px;padding-right:3px; padding-bottom:3px}
div.edit-section-save-bar a {color:#075191;text-decoration:none}
div.edit-section-save-bar a:hover {color:#075191;text-decoration:underline}
div.edit-section-validation-error {padding:4px}
div.edit-section-validation-error span {color:Red;}
.edit-section-input {border:1px solid #AACCEE; color:#606060 }
.edit-section-textarea {border:1px solid #AACCEE;width:98%; color:#606060 }
.edit-section-select { border:1px solid #AACCEE; color:#606060 }
span.edit-section-required-symbol{ color:Red;font-size:8pt;font-family:Verdana }
span.edit-section-message-bar-error{}
span.edit-section-required-symbol{}
/* -------- Edit Panel ------------ */

So now I wanted to change the color scheme and make things look consistent across the application, how would I know I made all the borders look correctly? How about all the fonts and or back ground colors, you would have to wade through the noise and hope you got everything. Although I don’t always succeed, I really try to keep my code organized into certain patterns that is to say if I need to add an event handler to a WebForm, well, I’ve got a #region block in my code and all event handlers get placed in that #region. So thinking about it, why should CSS be any different? I adopted the following organizational strategy to make this a bit easier to manage, it’s a little bit longer, but if I want to change colors, I can just work in one area and make sure I get them all right.

/* -------- Edit Panel ------------ */
/* Colors */
div.edit-panel {border:1px solid #AACCEE;background-color:white}
div.edit-panel-header {background-color:#EBF3FB;border-bottom:1px solid #AACBEE;}
div.edit-panel-header span{color:#07519A;}
div.edit-panel-header-tight {background-color:#EBF3FB;border-bottom:1px solid #AACBEE;}
div.edit-panel-header-tight span{color:#07519A;}
div.edit-section-validation-error span {color:Red;}
span.edit-section-required-symbol{ color:Red;}
.edit-section-caption {color:#07519A;}
.edit-section-input edit-section-select edit-section-textarea {border:1px solid #AACCEE; color:#606060 }
div.edit-section-save-bar a {color:#075191;}
div.edit-section-save-bar a:hover {color:#075191;}
/* Colors */

/* Layout */
div.edit-panel {text-align:left;width:400px;}
div.edit-panel-header {margin:0pt 0pt 6px;padding:3px 6px;}
div.edit-panel-header-tight {padding:3px 6px;}
div.edit-section {padding:4px;}
.edit-section-textarea {width:98%;}
.edit-section-caption {display:block;padding-left:5px;color:#07519A;}
div.edit-section-validation-error {padding:4px}
div.edit-section-save-bar {text-align:right;padding-left:4px;padding-right:3px; padding-bottom:3px}
div.edit-section-save-bar a {text-decoration:none}
div.edit-section-save-bar a:hover {text-decoration:underline}
/* Layout */

/* Fonts */
div.edit-section {font-family:Tahoma;font-size:9px}
.edit-section-caption {font-weight:bold;padding-left:5px;color:#07519A;font-size:1.2em;font-family:Verdana}
div.edit-panel-header span{font-family:Verdana;font-weight:bold;}
div.edit-panel-header-tight span{font-family:Verdana;font-weight:bold;}
span.edit-section-required-symbol{font-size:8pt;font-family:Verdana }
/* Fonts */

/* Misc */
span.edit-section-message-bar-error{}
span.edit-section-required-symbol{}
/* Misc */
/* -------- Edit Panel ------------ */

-ec

No comments:

Post a Comment