The Daily WTF: Curious Perversions in Information Technology

Bellinghman · 2005-03-07 Reply Admin

'Redudant'. I like it. Dudeness roolz.

But I like the tag names. Of course, a nitpicker would like the names to reflect 'why' rather than 'what', but I'm sure that some tag out there exists that maps one to the other, like:

Important { ItalicsRed }

(Or however CSS actually works - I apologise for not looking it up right now.)

Sweets · 2005-03-07 Reply Admin

If this person(top example) is a programmer, I would love to see their variable naming convention.
Reminds me of that great post with the awsome const declarations

Const int ONEPLUSTWO = 1+2

Stan Rogers · 2005-03-07 Reply Admin

Yeah -- us nitpickers are throwing fits about now. The idea of CSS is to separate semantics (the markup) from appearance. There's nothing wrong with classing -- making one set of elements appear different from another, for instance -- but there IS a problem with this approach. Let's say you want to change the appearance of the page. With "meaningful" classes, you'd make the elements in your intro block, say, a nice mauve on a beige background (don't laugh, it can happen) merely by changing the style sheet. The problem is that your 80% -height mauve Verdana is occuring in paragraphs that are clearly marked "smallishGreenComicSansWithABlackBackground". Right now, that's a View->Source WTF. Next time a change rolls around, somebody (probably not the original designer) has to try and figure out what's what -- do I make the red green ones purple, or was it the blue yellow bold ones italic white?

JamesCurran · 2005-03-07 Reply Admin

Alex Papadimoulis:

largerBoldGreen {font-size:large; color:Green}

So, did anyone else notice that "largerBoldGreen" doesn't actually bold the text? I guess "Bold" is merely describing the color green.....

2005-03-07 Reply Admin

This is the "classic" first style sheet for any designer that has just started using css. It takes most people a long time to be convinced that content descriptive styles, like articleTitle are better then style descriptive titles like normalBlackArialItalic.

phpkid · 2005-03-07 Reply Admin

I wonder how he would name floats? ;)

2005-03-07 Reply Admin

It should be noted that there's no way in CSS to write smallishBlueTahomaBold { /* inherit from smallishBlueTahomaNormal */ font-weight: bold;} so that it actually works like the comment suggests.

2005-03-07 Reply Admin

iHaveNoClueWhatImDoingButSomeTimesItGoesRightAndNowItsGreenToo {
float: right;
font-color: green;
}

2005-03-07 Reply Admin

Let's give the b tag guy some credit.. Maybe he heard that it's more recommended to use the STRONG tag instead of B, so he thought the B tag was on it's way to deprecation very quickly. Then he decided to get his page covered for when that happens.

2005-03-07 Reply Admin

Notice the lack of "." at the beginnings of the definitions. This doesn't look like bad class naming in HTML, it's bad tag naming in XML.

2005-03-07 Reply Admin

CSS uses some relatively complicated weighting rules for deciding whether a user's CSS, the browser's CSS, or the author's CSS is used. "b { font-weight: bold; }", is, to be fair, completely reasonable and completely justifiable, albeit I would expect it to be written "b { font-weight: bold !important; }".

What could be considered unreasonable is using CSS to style pre-CSS elements. ;)

2005-03-07 Reply Admin

:
It should be noted that there's no way in CSS to write smallishBlueTahomaBold { /* inherit from smallishBlueTahomaNormal */ font-weight: bold;} so that it actually works like the comment suggests.

You can achieve this like this though:

#smallishBlueTahomaNormal, #smallishBlueTahomaBold
{
    font-family: Tahoma, sans-serif;
    color: blue;
}

#smallishBlueTahomaBold
{
    font-weight: bold;
}

Cheers,
    Andre

spooky action at a distance · 2005-03-07 Reply Admin

:
It should be noted that there's no way in CSS to write smallishBlueTahomaBold { /* inherit from smallishBlueTahomaNormal */ font-weight: bold;} so that it actually works like the comment suggests.

.smallishBlueTahoma {font-size:small; color:Blue; font-family:Tahoma;}
.Bold {font-weight:bold;}

same as smallishBlueTahomaNormal

same as smallishBlueTahomaBold, but inherits from smallishBlueTahomaNormal.. well, sorta

fluffy · 2005-03-07 Reply Admin

:
Notice the lack of "." at the beginnings of the definitions. This doesn't look like bad class naming in HTML, it's bad tag naming in XML.

Oh god, you're right. Even worse.

fluffy · 2005-03-07 Reply Admin

:
CSS uses some relatively complicated weighting rules for deciding whether a user's CSS, the browser's CSS, or the author's CSS is used. "b { font-weight: bold; }", is, to be fair, completely reasonable and completely justifiable, albeit I would expect it to be written "b { font-weight: bold !important; }".

What could be considered unreasonable is using CSS to style pre-CSS elements. ;)

Strictly-speaking, B *is* a pre-CSS element.

2005-03-07 Reply Admin

Where are the stinking commments? I needs some stinky comments like this Css has!

/* Page Title */

.t5Title {font-family: Geneva,Verdana,sans-serif; font-size: 24.5px; color: #ffffff; line-height: 25px; }
.t5SubTitle {font-family: Geneva,Verdana,sans-serif; font-size: 14.5px; color: #ffffff; line-height: 17px; }

/* General Blue (Dark Sky) */

.t1 {font-family: Geneva,Verdana,sans-serif; font-size: 11px; color: #005588; }
.t1Sml {font-family: Geneva,Verdana,sans-serif; font-size: 9.5px; color: #005588; }
.t1Lrg {font-family: Geneva,Verdana,sans-serif; font-size: 13px; color: #005588; }
.t1Big {font-family: Geneva,Verdana,sans-serif; font-size: 14.5px; color: #005588; }

/* html */

A:link { font-family: Geneva,Verdana,sans-serif; color: #005588; text-decoration: underline; }

A:visited { font-family: Geneva,Verdana,sans-serif; color: #005588; text-decoration: underline; }

A:active { font-family: Geneva,Verdana,sans-serif; color: #005588; text-decoration: underline; }

A:hover { font-family: Geneva,Verdana,sans-serif; color: #5C87B6; text-decoration: underline; }

P { font-family: Geneva,Verdana,sans-serif; font-size: 11px; margin-top: 0px; margin-bottom: 12px; }

FONT { font-family: Geneva,Verdana,sans-serif; }

SPAN { font-family: Geneva,Verdana,sans-serif; }

TD { font-family: Geneva,Verdana,sans-serif; font-size: 11px; }

UL { font-family: Geneva,Verdana,sans-serif; margin-top: 6px; margin-bottom: 12px; }

LI { font-family: Geneva,Verdana,sans-serif; margin-top: 6px; margin-bottom: 6px; }

SUP { font-family: Geneva,Verdana,sans-serif; font-size: 8px; }

2005-03-07 Reply Admin

Wow. Gotta love the 'redudancy' of some people. That reminds me of adding a inline frame inside a table which is inside another inline frame. I think I saw that somewhere. *shrug*

Nice job.

Jeff S · 2005-03-07 Reply Admin

yes, the initial periods are missing from the class names, I re-created the stylesheety from memory in notepad and must have left them out when I typed it in (I promise I did NOT exaggerate). Don't get caught up in syntax for this example; it's not really the point.

(Despite the above note, I'm sure we can look forward to many "the real WTF is that it is missing the initial periods before the class names!" posts upcoming ...)

Jeff S · 2005-03-07 Reply Admin

Stan Rogers:
Yeah -- us nitpickers are throwing fits about now. The idea of CSS is to separate semantics (the markup) from appearance. There's nothing wrong with classing -- making one set of elements appear different from another, for instance -- but there IS a problem with this approach. Let's say you want to change the appearance of the page. With "meaningful" classes, you'd make the elements in your intro block, say, a nice mauve on a beige background (don't laugh, it can happen) merely by changing the style sheet. The problem is that your 80% -height mauve Verdana is occuring in paragraphs that are clearly marked "smallishGreenComicSansWithABlackBackground". Right now, that's a View->Source WTF. Next time a change rolls around, somebody (probably not the original designer) has to try and figure out what's what -- do I make the red green ones purple, or was it the blue yellow bold ones italic white?

Exactly! Well-said as usual, Stan.

2005-03-07 Reply Admin

:
It should be noted that there's no way in CSS to write smallishBlueTahomaBold { /* inherit from smallishBlueTahomaNormal */ font-weight: bold;} so that it actually works like the comment suggests.

This comes close:
smallishBlueTahomaNormal, smallishBlueTahomaBold {
font-size:small;
color:blue;
font-weight:normal;
}

smallishBlueTahomaBold {
font-weight:bold;
}

Maurits · 2005-03-07 Reply Admin

:
Notice the lack of "." at the beginnings of the definitions. This doesn't look like bad class naming in HTML, it's bad tag naming in XML.

Unless the initial dots got eaten by an SMTP engine

2005-03-07 Reply Admin

Alex Papadimoulis:
Of course, not everyone invents an intersting way of using this CSS technology. Curt Sampson's colleague went with the More-Than-Needed Classical Redudant approach:
     b {
            font-weight   : bold;
     }

What is wrong with that? According to the recent specs, the user agent shouldn't define the formatting for it, but it does for backwards compatibility. He's just preparing for the event that a user agent doesn't give b a default formatting (I personally wish UAs quit giving a default large font size for tags like H1 so idiots would quit think it is for "making the text larger")

foxyshadis · 2005-03-07 Reply Admin

At least it isn't b.bold { font-weight: bold } with a usage like:



I suppose if you're printing to a high-end publishing press a b.bold, b.bolder, b.boldest (with font-weight: 400, 600, 800) might make sense.

Or not. We have pagemaker for a reason. :p

Awesome that the guy found a way to flatten an explicitly heigharchial cascading formatting language. I bet he's the kind of guy who makes the endless unrolled loops here, because 'loops are slow and generic code is slow'.

I was discussing with the CSS3 people (Mike Kay et al) on the mailing lists for a while on the feasilibility and best design for explicity CSS macros to make style reuse and interchangability easier, but I left it because 3 seemed to have lost steam. As far as I know it's still just floating and being turned into a variety of proprietary extensions in Opera and Mozilla.

2005-03-07 Reply Admin

foxyshadis:

Now that is comedy.

Foon · 2005-03-07 Reply Admin

:

Where are the stinking commments? I needs some stinky comments like this Css has!

/* Page Title */

.t5Title {font-family: Geneva,Verdana,sans-serif; font-size: 24.5px; color: #ffffff; line-height: 25px; }
.t5SubTitle {font-family: Geneva,Verdana,sans-serif; font-size: 14.5px; color: #ffffff; line-height: 17px; }

/* General Blue (Dark Sky) */

.t1 {font-family: Geneva,Verdana,sans-serif; font-size: 11px; color: #005588; }

etc. Wouldn't it be wiser to do a

<FONT style="BACKGROUND-COLOR: #efefef" color=#800000 size=2> </FONT>
.body<FONT size=2> {</FONT><FONT color=#ff0000 size=2>font-family</FONT><FONT size=2>: </FONT><FONT color=#0000ff size=2>Geneva,Verdana,sans-serif</FONT><FONT size=2>}
</FONT>

or even just a

[code language="javascript"].<FONT size=2> {</FONT><FONT color=#ff0000 size=2>font-family</FONT><FONT size=2>: </FONT><FONT color=#0000ff size=2>Geneva,Verdana,sans-serif</FONT><FONT size=2>}
</FONT>
[/code]

and not to explicitly put the font name everywhere? After all, the idea of CSS is to cascade.

2005-03-07 Reply Admin

Sweets:
If this person(top example) is a programmer, I would love to see their variable naming convention.
Reminds me of that great post with the awsome const declarations

Const int ONEPLUSTWO = 1+2

That's terrible. Should be:

const int ONE = 1;

const int TWO = 2;

const int ONEPLUSTWO = ONE + TWO;

mugs · 2005-03-07 Reply Admin

:

[image] Sweets wrote:

If this person(top example) is a programmer, I would love to see their variable naming convention.
Reminds me of that great post with the awsome const declarations

Const int ONEPLUSTWO = 1+2

That's terrible. Should be:

const int ONE = 1;

const int TWO = 2;

const int ONEPLUSTWO = ONE + TWO;

Dang it, I wish I'd stay logged in.

bat · 2005-03-08 Reply Admin

The redundant font repetition is occasionally useful: Internet Exploiter isn't very good at cascading, so sometimes you need tricks like that.

ObWTF: as a CSS geek (did I list that in my long long list of programming languages yesterday? Never mind) I can state with authority, as someone who has been quoted by Zeldman and once sent a correction to Eric Meyer: today's post is very definitely a WTF, and the tragic sad-sack who wrote it should be slapped about with a copy of The Well-Meaning But Long-Winded And Irritatingly Preachy Orange Book until he recants.

Drak · 2005-03-08 Reply Admin

Foon:

<FONT style="BACKGROUND-COLOR: #efefef" color=#800000 size=2> </FONT>
.body<FONT size=2> {</FONT><FONT color=#ff0000 size=2>font-family</FONT><FONT size=2>: </FONT><FONT color=#0000ff size=2>Geneva,Verdana,sans-serif</FONT><FONT size=2>}
</FONT>

or even just a

 
<FONT face="Lucida Console, Courier" size=2>.<FONT size=2> {</FONT><FONT color=#ff0000 size=2>font-family</FONT><FONT size=2>: </FONT><FONT color=#0000ff size=2>Geneva,Verdana,sans-serif</FONT><FONT size=2>}</FONT></FONT>

and not to explicitly put the font name everywhere? After all, the idea of CSS is to cascade.

Your first example wouldn't work as expected because of the . in front of body (unless you want it on all elements with class body). If the. is left out, it would work great, unless you added a size to it, it which case TDs in Internet Explorer would gladly ignore the size.

CSS is great, but would be even better if the results were more predictable in a lot of browsers.

Drak

2005-03-08 Reply Admin

'bold' is presumably a recursive abbreviation for 'BOld boLD'.

icelava · 2005-03-08 Reply Admin

Wow he has written his style in stone. Good luck when the blue or green text have to be different colours and fonts later.

Ted · 2005-03-08 Reply Admin

The default presentation given by browsers is important: it means that even in the absense of CSS a properly marked-up page is still readable. For semantic elements like h1 the default presentation could theoretically be anything, but in practice graphical browsers tend to mimic each other which makes people just assume that level 1 headings will be large and bold, but I used a browser a long time ago which also gave top-level headings a darker background so that they stood out as section or chapter markers.

When it comes to purely presentational elements like B, however, there's much less room for interpretation. The spec says that B means bold, so B means bold. It could be argued that a browser which doesn't render it in bold is violating the spec, but since it's deprecated it doesn't matter very much.

2005-03-08 Reply Admin

I allways use CSS like

.header

{

font-size:1.2em;

}

.white

{

color:white;

}

.red

{

color:red;

}

and if i want a red header :

or a white

JamesCurran · 2005-03-08 Reply Admin

:

And what does that get you other than save a (very) few keystrokes?

If you decide to go from red headings to white headings you still have to change EVERY SINGLE heading and EVERY SINGLE PAGE.

If you'd used CSS as it was intended, you'ld only have to make one change (to the CSS sheet). Further, you could even use two different style sheets, and have the same page appear two different ways (say for two different customers).

Check out CSS Zen Garden to see what you can do with Style Sheets.

Mike R · 2005-03-08 Reply Admin

spooky action at a distance:

[image] wrote:

It should be noted that there's no way in CSS to write smallishBlueTahomaBold { /* inherit from smallishBlueTahomaNormal */ font-weight: bold;} so that it actually works like the comment suggests.

.smallishBlueTahoma {font-size:small; color:Blue; font-family:Tahoma;}
.Bold {font-weight:bold;}

same as smallishBlueTahomaNormal

same as smallishBlueTahomaBold, but inherits from smallishBlueTahomaNormal.. well, sorta

Woah. I didn't know you could set two classes to an element? I tried it and it seems to work. Where in the standard does it say this is allowed?

2005-03-08 Reply Admin

http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

Mike R · 2005-03-08 Reply Admin

:
http://www.w3.org/TR/html4/struct/global.html#h-7.5.2

"Multiple class names must be separated by white space characters."

Hmm, I never knew that [:$] And they say you don't learn anything by reading The Daily WTF [:D]

Jeff S · 2005-03-08 Reply Admin

wow I never knew that as well.

But to the guy who said he uses class names like "Red" -- be careful, we may have a troll on our hands.

(Of course, I'm sure to the really smart people who read this forum it was brilliant sarcasm with subtle yet powerful irony and just the right amount of nuance, but to dumb guys like me it looked like someone who doesn't grasp the concept of what stylesheets are good for)

icelava · 2005-03-08 Reply Admin

:
and if i want a red header :


or a white

The point of CSS is to allow you to tag much more descriptive and meaningful labels/names to your classes of HTML elements so you know what the thing is for or contains, instead of what it looks like.

2005-03-08 Reply Admin

Jeff S:

But to the guy who said he uses class names like "Red" -- be careful, we may have a troll on our hands.

No, not this time. There are lots of people who wouldn't even blink at doing something like that.

I found a CSS beginner's tutorial that tells you to have a class named "Red" -- http://codepunk.hardwar.org.uk/bcss05.htm

matejcik · 2005-03-08 Reply Admin

am i the only one to see how much time can this style sheet save?
obviously, all combinations of fonts and colors are contained in the CSS. when you then write HTML, you don't need to say crazy things like hello, you just simply declare it hello and are done with it!
truly, ingenious!
now if only could i remember in what order those "css parameters" go...

2005-03-10 Reply Admin

Now, using descriptive names for what a class does is pretty standard when working across countries. I've had to do it on quite a few projects where I've done the design and the coding was outside. Things like 'whiterow' and 'greenrow' for alternating colors. Yes, it's silly, but it seems like no one looks at the actual style sheet.

And using b as a class for bold is fine, and is certainly acceptable. And yes, it certainly can count down on page weight.

thetorpedodog · 2005-03-15 Reply Admin

icelava:
[image] wrote:
and if i want a red header :


or a white


The point of CSS is to allow you to tag much more descriptive and meaningful labels/names to your classes of HTML elements so you know what the thing is for or contains, instead of what it looks like.

thetorpedodog · 2005-03-15 Reply Admin

Mmm…tasty post!

I was saying that I think that the bigger problem is that he's using  for headers. There may be a tag for that…no, there are six!

Cascading in Style

Leave a comment on “Cascading in Style”