Pedantic As Fuck: Coding Guidelines
Folder Structure:
To support EE integration, all template assets (css, images, scripts etc) should be nested within an encompassing “style” folder; then subfolders are used to separate asset type:
/style/
/css
/images
/scripts
/flash
Image Filename Prefixes:
To help organize a cluttered image directory, I use 6 different prefixes to group files into their usage. These should cover 99% of any possible scenario. The only trick is to know when one prefix should be chosen in lieu of another. These are therefore arranged in a “cascade”:
- sprite_* - any sprite graphics
- btn_* - any button graphics (e.g. submit buttons, etc)
- icon_* - any icon graphics (e.g. arrows, bullets, etc)
- logo_* - any logos
- bg_* - a graphic that is used as a background image via CSS
-
img_* - any images included via the
<img />
tag
The cascade works by starting at the top, see if the image qualifies for that prefix; if so, use it, if not, continue to next prefix.
If multiple prefixes match, use them in sequence of the cascade. The exception is “bg_*”, which is implied if any higher prefix is used.
Example:
A submit button “
<button>Submit Me!</button>” uses a background image to override the browser’s default look. The design calls for 3 states: off, on, and active. The image should be created as a sprite to reduce server requests. Following the cascade, it qualifies as a sprite and button. Therefore it’s name might be: sprite_btn_submit.gif
Miscellaneous
Main/global stylesheet should be named “screen.css”
Filenames are all lowercase, words separated by underscores only (e.g. logo_google.png).
Filenames should be verbose for clarity
You are encouraged to separate CSS as much as is necessary to keep things organised
You are encouraged to go comment-crazy in CSS & JS
Use HTML comments to indicate the closing of any structural divs (or spans were helpful):
- If the div has an ID value, use “”
Example:
.......
- If the div has a CLASS value, use “” Example:
Use Google’s CDN for js libraries (e.g. jquery)
Use most current jquery (1.4.1 as of this writing: http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js)
When referencing asset files from within the HTML source, use absolute linking (e.g. “/style/css/screen.css”). Assets linked from within CSS can be relative (e.g. “../images/sprite_navigation.gif”).
Preferred doctype: xhtml 1.0 transitional
IE6/7, PNG support: Up to you!
Send a message
There are currently no messages.