You gotta use CSS



  • Some people aren't that entertained by bad HTML - they'll say that every HTML document is a WTF, or that it's not fun to make fun of generated code. Still, I chuckled at this, found on the website of a fairly large NGO. It goes on and on like this for a while:



    .body8px {
    FONT-SIZE: 8px
    }
    .body9px {
    FONT-SIZE: 9px
    }
    .body10px {
    FONT-SIZE: 10px
    }
    .body11px {
    FONT-SIZE: 11px
    }
    .body14px {
    FONT-SIZE: 14px
    }
    .body16px {
    FONT-SIZE: 16px
    }
    .body18px {
    FONT-SIZE: 18px
    }
    .bodybold {
    FONT-WEIGHT: bold
    }
    .bodybold10px {
    FONT-WEIGHT: bold; FONT-SIZE: 10px
    }
    .bodybold11px {
    FONT-WEIGHT: bold; FONT-SIZE: 11px
    }
    .bodybold12px {
    FONT-WEIGHT: bold; FONT-SIZE: 12px
    }
    .bodybold13px {
    FONT-WEIGHT: bold; FONT-SIZE: 13px
    }
    .bodybold14px {
    FONT-WEIGHT: bold; FONT-SIZE: 14px
    }
    .bodybold15px {
    FONT-WEIGHT: bold; FONT-SIZE: 15px
    }



  • @neven said:

    .body10px {
    FONT-SIZE: 10px
    }
    .bodybold {
    FONT-WEIGHT: bold
    }
    .bodybold10px {
    FONT-WEIGHT: bold; FONT-SIZE: 10px
    }

    Oooh, I know!  The WTF is that they should be using class="body10px bodybold", instead of a seperate "bodybold10px" class, right? 



  • I was totally hoping to find one that didn't have the right size, something like:

    .body11px {
    FONT-SIZE: 12px /* Updated Feb. 29, 2006, by Ron */
    }


     That would have been even better! :)



  • WOW! This is particularly bad. I wouldn't have minded if it used inline css attached to each tag, or even if they had used font tags, because that just shows obvious machine-generation. What bothers me most about this code is that you could end up writing [code]class="bodybolditalicsans-serif10px"[/code] which is SO close to [code]style="font-weight:bold;font-style:italic;font-family:sans-serif;font-size:10px"[/code] but 10x as infuriating...



  • I hate when people do this, when they think they're doing good by putting the style in the CSS, but they're doing it in a way that completely fails to seperate style from structure.

    Now, if they decide to have their text at 15px instead of 10px, they need to change their HTML instead of the CSS. Unless they want the body10px style to actually set the font to be 15px.

    It's annoying when people learn what's legally right, but don't bother to learn what's morally right.



  • still better than this:

    .rvts0,td,p{font-size: 12px;color: #000000;}
    .rvts1,h4{font-size: 12px;font-weight: bold;color: #000000;margin:0;}
    .rvts2{font-size: 12px;font-style: italic;color: #000000;}
    .rvts3{font-size: 12px;font-style: italic;font-weight: bold;color: #000000;}
    a.rvts4, .rvts4{font-size: 12px;color: #e27017;text-decoration: none;}
    a.rvts4:hover {color: #e27017;}
    a.rvts5, .rvts5{font-size: 12px;font-weight: bold;color: #e27017;text-decoration: none;}
    a.rvts5:hover {color: #e27017;}
    a.rvts6, .rvts6{font-size: 12px;font-style: italic;color: #e27017;text-decoration: none;}
    a.rvts6:hover {color: #e27017;}
    a.rvts7, .rvts7{font-size: 12px;font-style: italic;font-weight: bold;color: #e27017;text-decoration: none;}
    a.rvts7:hover {color: #e27017;}
    .rvts8,h6{font-size: 11px;font-weight: normal;color: #000000;margin:0;}
    .rvts9,h5{font-size: 11px;font-weight: bold;color: #000000;margin:0;}
    .rvts10{font-size: 11px;font-style: italic;color: #000000;}
    .rvts11{font-size: 11px;font-style: italic;font-weight: bold;color: #000000;}
    a.rvts12, .rvts12{font-size: 11px;color: #e27017;text-decoration: none;}
    a.rvts12:hover {color: #e27017;}
    a.rvts13, .rvts13{font-size: 11px;font-weight: bold;color: #e27017;text-decoration: none;}
    a.rvts13:hover {color: #e27017;}
    a.rvts14, .rvts14{font-size: 11px;font-style: italic;color: #e27017;text-decoration: none;}
    a.rvts14:hover {color: #e27017;}
    a.rvts15, .rvts15{font-size: 11px;font-style: italic;font-weight: bold;color: #e27017;text-decoration: none;}
    a.rvts15:hover {color: #e27017;}

    your CSS at least provides some readability. the css above is clearly from an automated tool, but i fail to see how making it impossible for manual editing would make it easier for automated processing.



  • @neven said:



    .body18px {
    FONT-SIZE: 18px
    }
    .bodybold {
    FONT-WEIGHT: bold
    }
    .bodybold10px {
    FONT-WEIGHT: bold; FONT-SIZE: 10px
    }

    Dang!  That looks like my early CSS efforts.  I'm still embarrassed about
    it, and worse, I think it's still being used for part of our company's
    website.

    Still not as bad as the guy who saved multiple pages to
    the site named page.html, page.old.html, page_fd.old3.html,
    page_fd.html (fd was the guy's initials).

     



  • @Jojosh_the_Pi said:

    Dang!  That looks like my early CSS efforts.  I'm still embarrassed about
    it, and worse, I think it's still being used for part of our company's
    website.

    We've all written code we're ashamed of, it's the fact that we can recognise that and do better next time that stops us being awful programmers. Anyone who thinks that everything they've ever written is gold, is probably awful at their job. 


Log in to reply