CSS Optimization


In my everyday CSS coding practice I found a good way of CSS code optimization - in case you have a LOT of stylings in page.

I prepare a small pieces of code, which form big classes, as morphemes for high level CSS grammar.

My CSS grammar consist of elements, for example:

.tal {text-align:left}
.tac {text-align:center}
.tar {text-align:right}

.f10 {font-size:10px}
.f11 {font-size:11px}
.f12 {font-size:12px}

.cwhite {color:#fff}
.cred {color:red}
.cblack {color:#000}

.fb {font-weight:bold}

.pabs {position:absolute;}
.prel {position:relative;}

Using this approach you can easily create different combinations without using of big classes:

<p class="f10">text <span class="cwhite f12 fb">text text</span></p>

<p class="f12 cred">text <span class="cwhite f10 fb">text text</span></p>

Of course, there are another methods of CSS Optimization, but this one is good for page elements with a rich nuances.

tobto on 18-01-2008

Yes, jnadeau, classes and id should be named accordingly to their functions, but better to the documents structure. I simply made an example of the real css styles of some recent project.

jnadeau on 17-01-2008

The problem with this method is that your classes cease to describe the content and begin to describe the presentation. The idea with CSS is to keep the presentation out of the markup entirely. Using a class like "cwhite" is great until you want to change every cwhite element to be green!

Your opinion




Are you a human?
Are you a human?