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 concept 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 ludicrous; whereas, all my CSS files combined total just 25,000 bytes, which are enough to keep my little site functioning nicely.

Having already listed several groups of core classes (atoms) and tags, I'll repeat them for convenience:

IMAGE PLACEMENT

BORDERS

VERTICAL SPACING

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

SPACER BARS

regulates the width and padding of horizontal bar graphics

FAVORITE COLORS

Naming atoms such that their functions are clear makes them easier to remember and use.  There being a tradeoff between brevity and clarity, one would do best to strive for a middle ground, with class names just long enough to be unambiguous.  Some of my own are a bit longer than necessary, such as [align-right], when [aln-rt] would be sufficient.  Conversely, my vertical-alignment designations could be less ambiguously named to [aln-top], [aln-mid], and [aln-bot].  I never bothered to change them, because they are little-used.

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.