The process of optimizing the CSS used in a web site can be quite complicated. The subtle interplay between selectors, attributes, specificity, inheritance and the DOM elements can significantly impact the outcome. Style guides can be a thing of elegant beauty, to be admired by many and revered by those steeped in the dark arts of styling.

There there's the code that George found when he took on the task of migrating a 1990's-era web site. Nobody expects code from a 15 year-old web site to be up to current standards. But there are limits. George's spidey sense started tingling when he found a file named 'css.php'. A look inside didn't do anything to turn the alarm bells off.


It was with real trepidation that George cracked open the CSS_print_srnbi function.

function CSS_print_srnbi( $what){
  global $CSS_color;
  global $CSS_background_color;
  for( $i= 1; $i < 256; ++$i){
    echo "$what.";
    if( $i & 128) echo "f";
    if( $i & 64) echo "t";
    if( $i & 32) echo "c";
    if( $i & 16) echo "s";
    if( $i & 8) echo "r";
    if( $i & 4) echo "n";
    if( $i & 2) echo "b";
    if( $i & 1) echo "i";
    echo " { ";
    if( $i & 128) echo "border-width: 1px 0px 1px 0px; ";
    if( $i & 64) echo "vertical-align: top; ";
    if( $i & 32) echo "text-align: center; ";
    if( $i & 16) echo "font-variant: small-caps; ";
    if( $i & 8) echo "background-color: #$CSS_color; color: #$CSS_background_color; ";
    if( $i & 4) echo "font-stretch: narrower; ";
    if( $i & 2) echo "font-weight: bold; ";
    if( $i & 1) echo "font-style: italic; ";
    echo "}\n";

Behold. Elegant beauty personified in 25 sublime lines of code.

Fortunately (or unfortunately, for those who want to see this technique taken to it's still unrealized conclusion...unicode characters) only "b", "f", "fb" and "tc" were used as classes throughout the website.

[Advertisement] BuildMaster allows you to create a self-service release management platform that allows different teams to manage their applications. Explore how!