|HTML & CSS
Tips and Tricks
A CORNUCOPIA OF CLASSES
There are dozens of web pages and lecturers out there extolling
both the virtues and the alleged drawbacks of
CSS programming; so you can read all that stuff elsewhere.
As far as I am concerned, however, the jury is in, and OOCSS
is a big winner. It's not the only new system under development;
but it has proved invaluable to me.
A library of re-usable chunks of code is what OOCSS is all
about. Not having to
re-invent the wheel regularly,
the ability to create modules and make adjustments at will, and being
able actually see what one's code is doing are so utterly conducive
to production and enjoyment that the arguments against it pale in
One doesn't need to overdo it, though. Facebook's Master
CSS file is a reported
2gb in size, which is both incredible
and ridiculous; whereas, all my CSS files combined total just 25,000
bytes, which are enough to keep my little site functioning nicely.
I already have listed several groups of core classes (atoms) and tags. I'll repeat them for convenience:
As further suggestion, here is the remainder of my core collection:
used only with tables
regulates the width and padding of horizontal bar graphics
.suffix enables effects such as '4th' or '23rd'
Note that all atoms are named such that their functions are clear. The only remotely complicated items on that list relate to creation of the text boxes; and even those can be handled simply by applying the requisite atoms directly. Note how readable the following actual code is:
This box can look any way you like, by specifying classes
for border, typeface, font size, text alignment, and colors.
The extent to which you might utilize such methods is your choice, of course; but it also could be a measure of your overall efficiency as an HTML coder.