The current CSS in Battrick is split over 5 browser-specific files, a lot of which replicate each other. Adding new features means 5 times as much work. As part of the suggestions I've been consolidating (still working on it) the CSS into 1 (or maybe 2 if we need IE hacks) file(s) that works on all browsers. However, it can be good practice to have different types of CSS statements in different files. This will help with maintenance of the site, future changes (adding new features), and aiming for cross-browser consistency.
This file is simply a wrapper for the reset.css layout.css, fonts.css and colours.asp, so that they don't have to be called individually. By making it a .asp file, but serving it with a css header, we can build the css file at the back end, saving 4 HTTP calls. By also setting an expires header of 24 hours, this file will be called once on the first page that requires, then won't even make a call to get a 304 Not Modified response on future calls, saving lots of HTTP calls over the course of a user's visit.
This file is taken from the Yahoo UI Library idea, which "removes and neutralizes the inconsistent default styling of HTML elements, creating a level playing field across A-grade browsers and providing a sound foundation upon which you can explicitly declare your intentions."
It does mean that *every* default styling is removed (e.g. <em> is no longer italic, paragraphs run on due to no margins, lists have no numbers or bullets, etc), and that these styles have to be included within the other css files. However, by forcing this reset and reiteration of styling, it is done much more consistently in A-grade browsers, meaning there's less chance of browser-specific problems later on.
I propose that we simply copy and paste the most recent version of Yahoo's compacted reset.css into our own reset.css, which can then be included via ASP, without the need to refer to the Yahoo site each time.
This file includes all the layout styles, including anything with width, height, margin, padding, border (width), positioning, display/visibility, alignment of block elements, floats, etc. Changing styles in this file will dramatically affect the site. Any browser-specific problems are likely to occur due to what is contained in this file - finding them would be much easier now, as you know they won't be affected by typographical or colour styles.
Typography is defined as the general character or appearance of printed matter
- in short, what the text looks like. Therefore, this file would cover, any of the font styles (family, size, style, variant, weight) and any of the text styles (align, decoration, indent, transform) for plain text paragraphs, links, headings, blockquotes, quotes, form labels, or any other textual markup (var, kbd, code, pre, dfn, em, strong), etc. It would definitely be worth looking into fonts section of the Yahoo UI Library, to see the best way of sizing fonts so that all browsers can resize effectively, adding to accessibility. Again, it may be best to take a copy of Yahoo's compacted fonts.css then tweak it to suit Battrick, following the examples from Yahoo.
Note that the *colour* of the text is not defined here.
Lastly is colours. These styles will by color, background (colour, and images) and border-color, for all site-wide elements. Changing these will obviously change the look of the site, but nothing should break because of it (as long as background colour is not the same as font colour, or a background image was part of the "layout" e.g. boxes). Having the colours in one place makes the problems due to css-specificity much easier to solve, as all of the cascading properties are in one file. Additionally, a different theme can be used by simply changing the contents of colours.asp - either to allow a theme-switcher, or just for seasonal period (ie. have an orange-colours.asp for Halloween (includes background images of pumpkins etc), a xmas-colours.asp (white / snow), etc).
By making the file a .asp instead of a .css file, we can use and set variables (common colours, path to background images, etc) at the top of the file, then use these variables throughout the rest of the file. Again, this makes changes colours for the whole site a matter of changing just one line, in one file - powerful stuff!
At the moment, I don't think I've come across any specific browser hacks needed to fix browser-specific bugs, but I wouldn't guarantee there won't be any. If it's for IE (almost certainly), then these can be included via conditional comments - but rather than specify all styles for IE, you let the cascading property of CSS do it's thing, and only overwrite the bits IE has problems with. All of the files above are complimentary - nothing should be fighting for priority. In hack files however, we have to do the opposite, and cascade most of the styling down, but tweak it a bit for the problem browser.
Being able to implement the most efficient cross-browser CSS in a highly organised fashion, means it needs the correct HTML to hook onto. If not, you'll end up re-writing the CSS to suit the HTML (you have to build foundations of a house before you can build the walls).