Over the years I’ve come to adopt many practices while working with xhtml/css and I thought it might be of use to others to document some of them and of use to me to open things up for discussion. Some of these deserve their own post (one day!), some may be blindingly obvious to the initiated while others may make you scratch your head if you dont work with a certain framework (see “CSS and ASP.net”). Please, add any of your practices to the list. Cheers.

CSS Frameworks vs. CSS Resets

While there is a huge debate as to the value of CSS frameworks such as Blueprint and Yaml there does seem to be a good deal of agreement that CSS resets such as Yahoo’s or Eric Meyer’s Reset Reloaded () are of value.

Switching to a framework myself for a few projects did cause some growing pains but likely saved some time in styling forms and some basic typography, and it provided a print style sheet that was adequate. Regardless, over time I’ve ended up significantly modifying all of them to suit my needs.

I wouldn’t recommend frameworks for new developers as it may gloss over some issues that you should know your way around, or even experienced developers as you’re probably better off writing your own set of base rules to modify on a per project basis. However, I do believe there is a group somewhere between the two that would find great utility and I applaud the idea behind frameworks despite doubting the likely ultimate outcome. However my workflow does not require a grid module within the browser (use them during design) so that functionality seen in most frameworks may be of use to others depending on how they work.

Some of the principle discussions come from Gary Barber, Johnathan Christopher and Jeff Croft.

Organization vs. Speed

The proper architecture of CSS is a much discussed subject that I do not believe has been as properly and passionately debated as I believe maybe it should. The neat-freak in us desires parcelized stylesheets, imported into a master stylesheet directly linked from the html file. Whereas the speed-freak knows that site performance is negatively effected by each http requested by a page. At the same time CSS optimizers abound to cut our 5k stylesheets into 3k stylesheets by removing whitespace and comments.

What is lacking is a tool to easily and automatically process ‘development CSS’ to ‘production CSS’. I don’t savor the idea of working on one single, uncommented CSS but I also don’t want to have to merge 10 stylesheets into one and then run that through a CSS optimizer when I just need to make a minor change. It would be interesting to develop an application to ‘compile’ your CSS server side.

CSS and ASP.Net

Though a more complete treatment is forthcoming I will make a few notes now.

I moved to the asp.net platform about a year ago because I got a job at a web development firm that used the framework exclusively. I don’t have a background in web development, I can muddle through with some limited SQL and C# skills but I’m not about to put together a multi-tiered e-commerce site myself anytime soon. However from a designer/coder standpoint, the flexibility and reduction in redundant code in using a combinations of master pages (uber-templates), themes, and user-controls (uber-server-side-includes) is awesome. As noted, this is a large subject unto itself and will be addressed at a later date but I am open to comment from others on the platform.

Body Tag

Many developers have advocated the use of adding classes to the body tag to allow for easy targeting of different subpages and subsections. This looks great and I wish I had thought of this before I started working in asp.net however given the ability to accomplish the same thing and more without mucking up our client-side code using the body tag to differentiate sections of a site is somewhat obviated for my purposed but pretty smart if you’re not using a development platform such as asp.net.

Microformats

They're a good idea in theory, and if you’re bored and want to ‘do more’ for a site go ahead and use them but if we’re talking about paid work, I’d adopt a wait and see approach to see if microformats evolve beyond the geek-club of web designers.

• Wikipedia: Microformats
• A glowing discussion on Vitamin from 2006
• Kyle Neath provides a dissenting view of the microformats craze

Abstracting Constructs

This topic is something that I’ve not seen really explored in the wild, nor is it something I've completely fleshed out. However I’ve gotten frustrated with creating CSS constructs such as a certain type of navigation menu or expanding box from scratch over and over again. I’d like to take the concept of functions or methods from traditional programming and abstract out some concepts so that you could “call a CSS function” by just adding a few lines of code specific to the menu such as button width/height, background URL, hover URL, etc which would overwrite the relavent styles and customize the abstracted contruct.

ID vs. Class

Very quick: IDs are unique sections or areas (i.e. <div id="”globalNavigation”"> ) whereas classes can be assigned to many things and things can have many classes . In the previous example the div would have three completely separate classes assigned.

Firefox and the Vertical Scrollbar

A quick tip I have found useful is forcing Mozilla to always have veritcle scroll bars present even if the page doesn’t scroll. This is the default behavior in Internet Explorer. The reason for this is that if one page is pretty short and a vertical scroll bar doesn’t appear, when a user clicks on a link to a longer page the scroll bar will ‘pop-up’ and shift your site over to make room for it. This effect can make people who don’t understand what happened think you site is broken (I know I know, trust me on this).

Force the scrollbar to always be visible by adding "html { overflow: -moz-scrollbars-vertical !important; }" to your CSS, be warned that it wont validate.

Farewell

That’s all for now, let me know some of your ideas on writing CSS.