Ted's Computer World 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 Object-Oriented 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 comparison.

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:

IMAGE PLACEMENT

*

BORDERS

*

VERTICAL SPACING

*

TEXT BOXES

*

TAGS

*

As further suggestion, here is the remainder of my core collection:

FONTS

*

LEFT-HAND MARGINS

*

INDENTS

*

VERTICAL ALIGNMENT

*

used only with tables

HORIZONTAL ALIGNMENT

*

PADDING

*

BARS

*

regulates the width and padding of horizontal bar graphics

FAVORITE COLORS

*

OTHER

*

.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 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.

Go Back