Well, how we do it here at work is pretty simple, try to keep it as simple and clean as possible.
Since no one uses Netscape 4 anymore, we can separate the huge css file into separate files in a css/ subdirectory for the style, and then separate the files by their function, ie:
structure.css (for the main structure of the layout)
header.css (for all the top frame menu and options)
leftnav.css (the tree menu)
text.css (for h#/p/span/ul/etc tags)
icons.css (for all the icons)
tabs.css (for all tab features)
tables/ (a directory of different css files, each pertaining to their own table style)
etc...
This makes managing different styles and sections of styles much easier than looking through a massive file.
Also, when coding CSS styles, don’t do:
table.grid { ...styles...}
td.gridHeader { ....styles for thead td's...}
td.gridCell { ....etc...}
But rather do:
table.grid { }
table.grid thead td, table.grid thead th { }
table.grid tbody td, table.grid tbody td { }
and etc...as long as you’re using valid XHTML, this makes development of tables quick and easy, and eliminates inline tags and lots of superfluous class="" attributes. It’s also semantically correct.
As for the HTML...
Don’t use it if it isn’t valid XHTML 1.0t, at least, which means no:
- width=""
- align=""
- border=""
- bgcolor=""
- <b>,<i>,<u> or other depreciated tags
- and use onclick,onload instead of onClick,onLoad, etc
That’s some suggestions just based on what I’ve learned trying to develop a framework at my job. Any other suggestions?
And of course, a lot of this could change should we ever move to a templating style...
MODX Staff
MODX Staff
☆ A M B ☆
