Comment On Styling With Classy CSS

That's awesome.  The developer probably had a spec that told them they had to use style sheets, but they couldn't be bothered with such a restrictive format.

Ok, so it renders one of the best parts of CSS useless, unless tomorrow blue will be yellow, but it does let you write a lot more compact html, so it's got some use and even benefits.

I hated the new tv.com layout anyway, but now... Do they really get payed for this!?

simply amazing.

That one from the source is really nice too:

<h1 style="padding:4px 0px 3px;"><font size="2"><span style="font-size:11px;">

this is just like the old "MY_ZERO_CONSTANT=0"... just in case you ever want to redefine the value of 0, you will have a rubust enough system to do it in.

Anonymous:

Ok, so it renders one of the best parts of CSS useless, unless tomorrow blue will be yellow, but it does let you write a lot more compact html, so it's got some use and even benefits.

I can see a use for fashion websites. Updating the pages with the 'new black' only takes one change.

Alex Papadimoulis:

And besides, HTML really isn't programming.

Whaddaya mean, HTML is not real programming? Of course it is. I've seen the term (X)HTML-programming" on sooo many CV:s.

As for today's post, this kind of work can only come from hands of someone, who titles himself "a HTML-programmer"

aw, you guys just dont understand how awesome this is.  You can get rid of all the very confusing code you see around like [font color="#F0C000" size="12"]!  How the hell am I supposed to know what that does?

 

   .f-red    {color:#c00;}
  .f-red2   {color:#c00;}

 

I think the stupidity and hilariosity of that code speaks for itself.

The color names are confusing, though!  They really should preface them with a c- instead of f- so you're certain you're dealing with a color and not a font.

  .c-green  {color:#060;}
  .c-med-green  {color:#3c0;}

Xargon:

The color names are confusing, though!  They really should preface them with a c- instead of f- so you're certain you're dealing with a color and not a font.

  .c-green  {color:#060;}
  .c-med-green  {color:#3c0;}

That's assuming f- stands for "font" 0:-)

Xargon:

The color names are confusing, though!  They
really should preface them with a c- instead of f- so you're certain
you're dealing with a color and not a font.

  .c-green  {color:#060;}
  .c-med-green  {color:#3c0;}

it is some kind of hungarian notation. the prefixed "f" means "font" (the color attribute applies principally to font).



but the guy who wrote this couldn't get away with a a coherent notation. he uses 2 different notations:

- prefixvalue as in ".fl {float:left;}" or ".mt-0 {margin-top:0px;}"

- prefix-value as in ".f-verdana {font-family:Verdana;}"



--

rien

Anonymous:

- prefixvalue as in ".fl {float:left;}" or ".mt-0 {margin-top:0px;}"

- prefix-value as in ".f-verdana {font-family:Verdana;}"

huh, well... ".mt-0 {margin-top:0px;}" should really belong to the
second category. did i told you this notation is not coherent ?



--

rien

Could the reason be speed? If every page points to the same CSS file,
then using the shorthand classes means less bytes sent to the browser.
.ml-30 is shorter than  margin-left:30px;

I didn't like the site before and having a look at the source explains why.



The pages link to a single stylesheet at http://www.tv.com/style/1/css/stylesheet.css which contains:

@import url(layout.css);
@import url(showspace.css);
@import url(fonts.css); 
@import url(user_sub.css);
@import url(buttons.css);
@import url(forums.css);
@import url(user.css);

Yes, I'm sure knowing the forums style on every page outside the forum is necessary.

.f-orange {color:#fc0;}

.f-lt-orange {color:#f90;}

.f-drk-orange {color:#f60;}

Unless my hexadecimal skills are rusty, it seems that "light orange" is between "dark orange" and "orange". So I guess light is the new medium.

Our internal website was originally put together by someone who knew CSS existed but didn't fully comprehend the concept of selectors. As such, our pages were FILLED with stuff like this:

<tr>
 <td class='TDFirstLineFirst'>First line, first column</td>
 <td class='TDFirstLineNormal'>First line, other columns</td>
 <td class='TDFirstLineNormal>First line other columns</td>
</tr>
<tr>
  <td class='TDFirst'>Other lines, first column</td>
  <td class='TDNormal'>Other lines, other columns</td>
  <td class='TDNormal'>Other lines, other columns</td>
</tr>


Repeated over and over and over, for every cell in every table.  And since our system is largely data-driven, it's a lot of tables.  Most of the table stuff comes from the fact that the author(s) didn't know about 'border-collapse: collapse', so they used the previously mentioned system to only draw the bottom and right borders (_|) on TDNormal, the left, bottom, and right borders (|_|) on TDFirst, the top, bottom, and right borders (]) on TDFirstLineNormal, and all four borders on TDFirstLineFirst.

Another WTF was that &nbsp;s (in case that doesn't work: &amp;nbsp; -- god DAMN this forum software sucks) were injected *all over* the place because someone didn't know about the 'empty-cells: show', to cause cell borders to be drawn for empty cells -- without which, because of the certain-borders-are-provided-by-certain-cells system, caused empty cells to result in missing left/top borders on adjacent cells.

Some carefully calculated CSS/HTML changes -- putting a single class on the master TABLE tag, and using more sophisticated selectors like 'TABLE.foo td', allowed me to cut some of the pages to 1/3 of their previous sizes.

You are correct that it reduces bytes sent to the browser.  However one of the major points of CSS is that rather than enumerating every value you want to be changed for each tag you can simply say class="menuItem" or class="tvTitle" or class="tableRow".  You're can still save bytes, but you gain the huge benefits that if you aren't mucking up your html code with ugly and hard to read style markup AND if you want to change the style for the entire website you can just change the CSS file without having to go through every single instance of the tag you want to change and modify the parameters.

.mt-30  {margin-bottom:30px;}

Looks like margin-bottom is the new margin-top.

Oliver Klozoff:

someone didn't know about the 'empty-cells: show'

Perhaps they know about it, and realize this property has no effect in IE6. Designing for 10% of your potential user base is the biggest WTF of them all.

 

Lumpio-:

.mt-30  {margin-bottom:30px;}

Looks like margin-bottom is the new margin-top.

They are using the uncommon but completely legitimate 'next cell' notation.  Kinda like inverting the y-axis on a flight sim.

c'mon, I am sure there have been way worsth submisions than this one

Anonymous:

<h1 style="padding:4px 0px 3px;"><font size="2"><span style="font-size:11px;">

Well actually this isn't a WTF at all, I use to do this for a newspaper site I use to webdev.  Wrapping <font> tags outside of your <span> tags allows you to still give formatting for ancient browsers.

While this is less important now than it was 3-5yrs ago, when I ran the newspaper site, I still had a surprising amount of legacy web browsers (Netscape 2 & 3, heck I even had an occasional Netscape 1 user).

In today's world it's not as important unless you are designing a site for the whole world (ex: Amazon) and I'd still use that method.

"you will have a rubust enough system to do it in."


Rubust?  Is that a combination of 'robust' and 'rubbish'?  I like it.

I work on projects that contain CSS like this on a daily basis, sometimes for major companies with high paid developers.  The most annoying part is I see the code, but I'm paid to do back end work so I can't even fix it.

travisowens:

Anonymous:

<h1 style="padding:4px 0px 3px;"><font size="2"><span style="font-size:11px;">

Well actually this isn't a WTF at all, I use to do this for a newspaper site I use to webdev.  Wrapping tags outside of your tags allows you to still give formatting for ancient browsers.

While this is less important now than it was 3-5yrs ago, when I ran the newspaper site, I still had a surprising amount of legacy web browsers (Netscape 2 & 3, heck I even had an occasional Netscape 1 user).

In today's world it's not as important unless you are designing a site for the whole world (ex: Amazon) and I'd still use that method.

For the 0.001% of people still using Netscape 4? Why? It's not as if leaving it out would make the page unusable for them anyway - anyone still using an ancient browser is going to be used to the entire web being nearly unreadable, and not having the exact font or size you want isn't going to make it any worse.  

A Wizard A True Star:

Oliver Klozoff:

someone didn't know about the 'empty-cells: show'

Perhaps they know about it, and realize this property has no effect in IE6. Designing for 10% of your potential user base is the biggest WTF of them all.

 

Lies, using IE is the biggest WTF of them all.

By virtue of my authority as Internet Pope, I hereby excommunicate TV.com from the Web.

They had a requirement for "valid" CSS.

Salta Mada:

By virtue of my authority as Internet Pope, I
hereby excommunicate TV.com from the Web.

Hey, Mr. Pope dude,
could you get rid of pop-ups and stop the Nigerian letters from
desecrating my email whilst you are purifying us sinners?

A Wizard A True Star:

Oliver Klozoff:

someone didn't know about the 'empty-cells: show'

Perhaps they know about it, and realize this property has no effect
in IE6. Designing for 10% of your potential user base is the biggest
WTF of them all.

 

I find that adding a WMF graphic to your home page that installs
firefox and sets it as the default browser tends to fix that problem.

triso:

Salta Mada:

By virtue of my authority as Internet Pope, I
hereby excommunicate TV.com from the Web.

Hey, Mr. Pope dude,
could you get rid of pop-ups and stop the Nigerian letters from
desecrating my email whilst you are purifying us sinners?

Silence, you unfaithful! Burn shall you in flames of hell! C|al|s, L3v|tr4 and V|4gr4 shall you eat! The pop-ups shall you click!
By virtue of my authority as Internet VicePope, I hereby order you to obey or be damned to selling University Diplomas and Rolex Replicas for eternity!
Thou shall not discuss the Internet Pope's words but implement them as a simple sinner that you are.

Anonymous:

A Wizard A True Star:

Oliver Klozoff:

someone didn't know about the 'empty-cells: show'

Perhaps they know about it, and realize this property has no effect in IE6. Designing for 10% of your potential user base is the biggest WTF of them all.

 

I find that adding a WMF graphic to your home page that installs firefox and sets it as the default browser tends to fix that problem.

If I wanted a broken browser and a horrible user experience I would go install firefox myself.

Anonymous:

I find that adding a WMF graphic to your home page that installs firefox and sets it as the default browser tends to fix that problem.

My idea was to write an ActiveX plug in that contains the Firefox render engine ...

Well, when writing stylesheets, there is usually a conflict between flexibility and simplicity. After all, stylesheets are ideal for people who use a small number of style properties over and over and over. The less diverse the style properties, the more effective the stylesheets become.



It seems that for these people flexibility won out. >_<



What strikes me about this is the almost-but-not-quite-Hungarian notation, implying that whoever did this might have heard of programming conventions at some point. Scary.

but he IS using stylesheets.
this is hillarious. I might put this is an an easter egg to my own code!

Indeed for the stuff i'm working on, overhauling a massive system that uses "90s HTML", i have a little bit of this stuff because I have to make it look essentially the same as it is now, but I'm encountering so many special cases that constructing new classes would become insane. This is there this mixin-style CSS is handy. However, I agree, this is way overboard. He's using these mostly for shorthands for (the rather verbose) CSS style properties.

Anonymous:

triso:

Salta Mada:

By virtue of my authority as Internet Pope, I
hereby excommunicate TV.com from the Web.

Hey, Mr. Pope dude,
could you get rid of pop-ups and stop the Nigerian letters from
desecrating my email whilst you are purifying us sinners?

Silence,
you unfaithful! Burn shall you in flames of hell! C|al|s, L3v|tr4 and
V|4gr4 shall you eat! The pop-ups shall you click!
By virtue of my
authority as Internet VicePope, I hereby order you to obey or be damned
to selling University Diplomas and Rolex Replicas for eternity!
Thou shall not discuss the Internet Pope's words but implement them as a simple sinner that you are.

By virtue of the fact that eight hours have gone by, and there are less than 40 replies, I would speculate that:



1. Damn few people have a clue about the WTF of the WTF



2. Even fewer people have a concept of CSS's



3. Most people don't give a rat's ass.



CSS's (correct me if I'm wrong), are opportunities to remove a lot of repetitive keystrokes in getting something done.



Like a "BASIC" subroutine.



Like a "C" function.



Of course, in the modern, pointy, clicky world, you merely cutnpaste, . . .



hmmmm. . .   with all that in-line cutnpaste code, we could do away with optimizing compilors.



. . .    another seven hour climb to the top of the mountain . . .



Your assignment, Mr Phelps, is to write a typesetting program that operates in 16 Kilobytes of memory.



This tape will self destruct. . . .     oops. . . .   We havn't invented tape yet

The scary part is that I didn't even know you could have multiple class names in a class="" entry.

Oh, and the mt thing for margin bottom... mt could stand for margin table.

Magic Duck:

Alex Papadimoulis:

And besides, HTML really isn't programming.

Whaddaya mean, HTML is not real programming? Of course it is. I've seen the term (X)HTML-programming" on sooo many CV:s.

As for today's post, this kind of work can only come from hands of someone, who titles himself "a HTML-programmer"

Several years ago, my co-workers and I were laughing at some of the CVs that had been received at our office for a highly skilled technical position.  One of the CVs listed HTML as a programming language, so I made some merciless joke about "HTML programmers".  This was when I had about 14 years of (non-professional) programming experience.

One of my co-workers pulled up my C.V. on the web, and pointed out that it contained something like this:




Yeah.  We all had a good laugh at my expense. 

What I think happened was that I was trying to come up with buzzwords for
keyword-searching headhunters, and I somehow forgot that I had written
"programming languages" instead of "computer languages".

I don't know why, but I never noticed it until it was pointed out to me.

travisowens:

Well actually this isn't a WTF at all, I use to do this for a newspaper site I use to webdev.  Wrapping tags outside of your tags allows you to still give formatting for ancient browsers.

Let me play the devil's advocate a bit.



If you care about graceful degradation, using CSS exclusively is a good
option: an ancient browser will show plain HTML, which is at least
readable, instead of keeping the wrong part of the formatting thus
making a mess out of your page. OTOH, if you care more about formatting
than about content, why not use tables and <font> tags
exclusively? They're not going anywhere anytime soon...





Really, now, I think this is actually a Dreamweaver WTF. This so-called
HTML editor is incapable of rendering CSS-based layout, so it uses
tables extensively (read tables in tables in tables... ad nauseum). It
also seems to have a very limited knowledge of CSS selectors, i.e. it
only knows how to define classes. Even for that, one must instruct it
on purpose, otherwise it will just stick <font> tags whenever one
tries to highlight a few words. Or else <span style="...">,
depending on a whim, apparently. Of course, absolute dimensions are the
norm - just try to use View -> Text zoom on a Dreamweaver-generated
"web page" and you can say good-bye to your carefully crafted layout.
And this is the most popular site creation tool out there...



The world's a WTF, I tell you,

Felix

Actually Felix, that's not entirely true. DreamWeaver produces massive amounts of WTFs when used in wysiwyg mode - when used with the "homesite" dealie turned on, it's more like a glorified notepad with FTP/SCP uploads, highlighing and file browsing. Compared to most, it's even fairly intelligent with it's code writing - not that any designer worth his/her ilk would use that automated code writing because it is still crap, even in the newer versions where they've fixed a lot of this.

I'm biased, I spent way too long writing web-fu in vi.

I love seeing these sorts of WTFs. My speciality is inserting layout around non-design-code (php, python, etc) and see a lot of little stupid screwups. Makes my day.

Jeannette
blankpixel.com
Ahhteeest & Designer

felix:

travisowens:

Well actually this isn't a WTF at all, I use to do this for a newspaper site I use to webdev.  Wrapping tags outside of your tags allows you to still give formatting for ancient browsers.

Let me play the devil's advocate a bit.



If you care about graceful degradation, using CSS exclusively is a good
option: an ancient browser will show plain HTML, which is at least
readable, instead of keeping the wrong part of the formatting thus
making a mess out of your page. OTOH, if you care more about formatting
than about content, why not use tables and tags
exclusively? They're not going anywhere anytime soon...





Really, now, I think this is actually a Dreamweaver WTF. This so-called
HTML editor is incapable of rendering CSS-based layout, so it uses
tables extensively (read tables in tables in tables... ad nauseum). It
also seems to have a very limited knowledge of CSS selectors, i.e. it
only knows how to define classes. Even for that, one must instruct it
on purpose, otherwise it will just stick tags whenever one
tries to highlight a few words. Or else ,
depending on a whim, apparently. Of course, absolute dimensions are the
norm - just try to use View -> Text zoom on a Dreamweaver-generated
"web page" and you can say good-bye to your carefully crafted layout.
And this is the most popular site creation tool out there...



The world's a WTF, I tell you,

Felix

Yea, you guys are right the biggest WTF of them all is that people actually think that Dreamweaver is a good html editor. To all those people, ha ha ha ha ha ha. Kewl, now that thats out the way, I've noticed a lot of people signing their posts. Is this because of that new law passed in the states? Could anyone shed some light on this for me?

It's tying them up, in a knot

After what they've done no wone will ever approach this stuff.

Braechnov:

"...the developers were able to find a way to tie back together style and content..."

 

How is this tying style and content?

 

You are kidding, right?

If you're not, then take a look at how the classes are defined and applied. In line with the date, as class attributes of container tags, live actual definitions of size, weight, colour, margings, padding, and so forth. So they're shortened up a bit and expanded in the stylesheet, so what? The particulars of formatting are still inline with the data.

When HTML (or an XML dialect) and CSS are done correctly*, the markup should only relate to the data. That is, you can identify headings, paragraphs, lists, links, definitions, data tables, and so forth, group them together into logical divisions on the document, and use classes to identify particular subspecies of elements. But there should not be any indication in the markup of what things should look like -- no colour, size, weight, and so forth. That's what the stylesheet does. And changing the stylesheet can give a completely different look to the page without touching the markup.

"But changing the stylesheet will change this page too," I hear you protest. Sure, but who wants to be stuck maintaining anything where blue is defined as yellow, x-big is actually small, and bold and italic are reversed? Using meaning-related rather than style-related class names means never having to say you're sorry. Well, at least not until the semantics change.

*Admittedly, markup that is semantic only in nature is going to be a problem if you need to acheive a particular look and also need to support Gen 4 and earlier browsers.

Sorry, blasted forum software. I was replying to this:
_____________________

"...the developers were able to find a way to tie back together style and content..."

 

How is this tying style and content?

Stan Rogers:

...In line with the date,...

Um, "data". Sorry.

There was an entire book on SVG that essentially advocated this approach - http://www.samspublishing.com/bookstore/product.asp?isbn=0672322900&rl=1

I was never able to figure out exactly what the author was trying to impress, or if he just didn't 'get' CSS.  SVG has drawing elements such as a .  The book would have a as part of drawing to represent the sun, instead of doing and then defining circle.sun as yellow, or orange, or some mix, the book used   and defining CSS classes leading to the obvious cliche - orange (brown, red, etc.) is the new yellow.

Unless someone from Google comments that this is a valid way to achieve high performance, mixing style with layout like this is a WTF

Xargon:

The color names are confusing, though!  They
really should preface them with a c- instead of f- so you're certain
you're dealing with a color and not a font.

  .c-green  {color:#060;}
  .c-med-green  {color:#3c0;}

I found this a little bit too obscure. If you write c-green, you can't
know which shade of green you get. Wouldn't this approach be better:

.c-060 { color: #060; }

.c-123 { color: #123; }

Now you know exactly what color you get!