As I mentioned before I've been really busy working on a new site and haven't had time for basically anything. The end game is in sight, so I thought it was time to post some thoughts on the last few months and what I've learned.

When I began development it was apparent that things were going to change. We just weren't all that sure what the flows were and what the final design would look like. Armed with that information I determined that there would be zero tables and everything would be styled with CSS. That way, as changes came down the line, I would be able to make them without touching the code.

• I made heavy use of MVP Pattern and user controls.
• Each user control I created a separate CSS file. The thought was that since these were likely to change, keeping everything in separate files would make management easier.
• I used Class and ID somewhat indiscriminately with an attempt to use ID only when I knew it would be unique.
• I used generic Class and ID but placed them in the particular CSS I was working on.
• I mixed CSS position and layout with font size and color.
• I placed all images in a single location.

There are problems associated with each of these decisions, though they all seemed like the correct decision at the time. Let's run through them and see what I wish I would have done different:

MVP and user controls - The only real problem I found with this decision was that I didn't make enough use of unit tests. The reason for not using as many unit tests was that I decided to not write any unit tests that had to hit the database. Given that requirement and given the reliance on some code that wasn't written in a testable manner I ended up making use of RhinoMocks. The effort of making the RhinoMocks calls so that I didn't hit the database was pretty high. This is more a function of my lack of skill with RhinoMocks than anything else. What happened was that the initial user controls had a lot of tests, but then over time they all got thrown away. I found myself tossing more code than I kept and the cost of using the mocking framework was growing beyond the timeframe I had to get the project done. I mostly abandoned doing the unit tests that relied on RhinoMocks. That was a serious mistake, which when I did it I knew I would pay a price for, but I was in the unenviable position of needing to show visible progress vs. writing solid maintainable code. Next time I will stick to what I know is correct.

Separate CSS file - This still seems like the correct approach, however I made a few mistakes. At times certain classes didn't fit within any of the CSS's I had already defined and rather than define a new CSS file I put them in whatever file I was currently using most. Given the amount of change going on, those styles tended to get lost, unused, or had effects later on when a new user control was created and happened to use the same CSS Class ID.

Class and ID mixing - I've had this discussion with our UI guru and he doesn't really have a solid opinion on what is correct and when. I think using a consistent approach would result in more maintainable code, but more important it will result in code/CSS that is far easier for non CSS gurus to understand. I think the answer here is using ID for all "containers" and then use class within the containers.

Used generic Class and ID - This related to the above, but essentially I should have created a generic CSS that held all the shared declarations. Later in the development cycle I did do this, however at that point it was almost impossible to fix what had already been done. The other major problem, and this one is huge, is that I didn't scope my CSS declarations correctly. So in places I used .floatleft { float:left....}. This was used a lot of places, but in some I needed a 25px margin in others zero margin. Once I had a significant amount of code, I would constantly find myself changing a CSS value and later finding it had an impact on something unexpected. In the future I will scope all my declarations: #mycontentcontainer .floatleft{ float:left, margin-left:25px;}.

Mixed CSS position and layout with font size and color - This relates to what I just stated above. With font size, color and position in the same declaration making changes to font and or color becomes far more complex than if I just had font and color in one declaration. The reason this became such an issue is that the fonts and colors on this site have changed 3 -4 times during development and over time those declarations got made inside of the specific locals instead of larger containers. This was necessary due to the evolutionary nature of the changes... e.g. change the font here in this box, but not anywhere else even though they all currently share the same font.

Placed the Images in a Single Location - In this I just followed the pattern that was already established and it wouldn't have been a real problem except that as the site design changed the images changed constantly. It became a problem keeping track of which version(s) of which images were being used and which were not, including where they were being used.

I Need a Tool

All of this brings me to the conclusion that there is a desperate need for a decent tool to manage CSS and Images. For example I want to know which CSS class/id is being used and where. MS Expression will show me which declarations on the current page are being used, but I want a larger site wide picture. I want to know which declarations are being used everywhere without having to go to each page and put together a list. That is just too time consuming to consider. The same can be said of images. I now have a lot of images that are dead, unused, and likely never will be used, but taking time to identify those is simply to hard.