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.

IE7 CSS Filters

*+html

element [attribute] { property:rule; }

element { property /**/:rule; }

#test1 { color /**/:green; }

IE 7 and below
*:first-child+html {} * html {}

IE 7 only
*:first-child+html {}

IE 7 and modern browsers only
html>body {}

Modern browsers only (not IE 7)
html>/**/body {}