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