My CSS Methodology
February 20th 4 comments
During the past 9 months or so I’ve been lucky enough to build quite a few CSS based websites. I learned quite a few things during these builds - from cool layout techniques to PNG24 IE hacks (dont ask). One thing I noticed during each of these builds was that I kept going back to previous builds to reuse bits of code I’d written before. That got tired real quick - so I decided to create a very basic yet robust CSS ‘framework’ (for lack of a better word).
So without further ado…here we go:
Three CSS Includes
My method uses 3 main style sheets per website. These should be included using the normal <link /> element.
<link rel="stylesheet" type="text/css" title="sitename" href="/css/style.css" media="screen" />
<link rel="stylesheet" type="text/css" title="sitename" href="/css/print.css" media="print" />
<!--[if IE]>
<link rel="stylesheet" type="text/css" title="sitename" href="/css/iehacks.css" />
< ![endif]-->
IEHACKS.CSS
The iehacks.css file is included using IE Conditional Comments. This is to ensure that the sites are future proofed (with the eminent release of IE7 this is quite important from a hacks management point of view). There should never be any IE hacks in the style.css file. This file should contain only valid css designed for compliant browsers.
PRINT.CSS
The print.css file will contain CSS used only for the printing of the website. Typically this file will hide the nav, BG images and any other non-printable stuff. Due to the very cool media=”print” attribute/value pair on the link element making PHP print versions of sites/pages is a thing of the past.
STYLE.CSS
The style.css file contains includes to other very generic CSS files as well as site specific CSS. A typical style.css file contains the following sections:
- Global Reset
This is a seperate CSS file that removes the default padding and margins from all elements and applies a standard relative margin to li’s; p’s; blockquotes, etc. - General Class styles
This is a seperate CSS file containing generic classes like .center; .red; .bold, etc - Forms
This is a seperate file that contains styling used on all forms (NOTE: I generally do forms in one way, so I tend to resuse this CSS everywhere.) - Accessibility goodies
This is a seperate CSS file containing CSS that hides the accessibility elements from the visual design. - Default Styles
Inline CSS to control colours, sizes, etc of elements. - The Look and Feel
Inline CSS for the layout, position of elements
I would typically add my site specific CSS directly into the style.css file thus keeping the seperate CSS files as generic as possible. For your conveniance I’ve provided a zip file with all the CSS files included. This is very basic CSS so don’t expect this to be all the code you’ll ever need.
Cheers Darren — can’t wait to download those files and have a poke around ;)
I’ve found the same thing with regards to re-using code. More often than not there is a bulk of work that won’t change, or will only change slightly, between projects. For that reason I’ve also found it helpful keeping base typography (fonts, sizes, etc) in a separate file. I’m particularly interested in your approach to forms — I’m in the middle of doing some complex ones at the moment, and they sure are pesky wee things.
[…] The users lips quivered in unspoken passion like the belly of a some fat guy running down stairs as his eyes scaned every conceivable inch of copy. Tips on CSS/JavaScript corners, CSS methodology and lists of valid CSS and web standard links as far as the browser could scroll. Dontcom was not just a preacher of the sacred laws of markup validation, but an example of it too. The user knew that beneath its cool blue titles, gray copy and crimson red subtitles that there was a code so finely structured that any geek would sell his mother for in a second to possess. Code that not even the most oppressor of search engines could not deny to harness and reward with a high search rank and would be tantalized in spidering to the nth degree. […]
Thanks Darren. I enjoyed continuing my CSS learning process thanks to this site. Next think to tackle and learn is forms.
[…] been using a standard three column template (both css and HTML) for a couple of years now. I wrote a post back in Feb ‘06 outlining my CSS Methodology (named rightly or wrongly…) I’ve refined and tweaked that […]