Comment On Cascading in Style

'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.)

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

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 <em> 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 <p> 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?

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.....

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. 

I wonder how he would name floats? ;)

   

 

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.

iHaveNoClueWhatImDoingButSomeTimesItGoesRightAndNowItsGreenToo {

    float: right;

    font-color: green;

}

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.

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.

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. ;)

:

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

:

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;}

<P class="smallishBlueTahoma">same as smallishBlueTahomaNormal</P>

<P class="smallishBlueTahoma Bold">same as smallishBlueTahomaBold, but inherits from smallishBlueTahomaNormal.. well, sorta</P>

:

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.

:

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.

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; }

 

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.

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 ...)

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 <em> 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 <p> 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.

:

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;

}

:

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

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")

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



<b class="bold">



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.

foxyshadis:

<b class="bold">

Now that is comedy.

:

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

 
.body {font-family: Geneva,Verdana,sans-serif}
 

or even just a

[code language="javascript"]
. {font-family: Geneva,Verdana,sans-serif}
[/code]

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

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;

:

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.

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.

Foon:

 
.body {font-family: Geneva,Verdana,sans-serif}
 

or even just a

. {font-family: Geneva,Verdana,sans-serif}
 

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

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

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

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.

I allways use CSS like

.header

{

font-size:1.2em;

}

.white

{

color:white;

}

.red

{

color:red;

}

 

and if i want a red header :

<p class="red header">

or a white

<p class="white header">

:

<p class="white header">

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.

spooky action at a distance:

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;}

<P class="smallishBlueTahoma">same as smallishBlueTahomaNormal</P>

<P class="smallishBlueTahoma Bold">same as smallishBlueTahomaBold, but inherits from smallishBlueTahomaNormal.. well, sorta</P>

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?

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

:

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]

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)

:

and if i want a red header :

<p class="red header">

or a white

<p class="white header">

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.



<p class="Warning header">



<p class="Normal header">



<p class="SideNote header">

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

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 <font face="Comic Sans MS" size="16"
color="PeachOrange"><b><i><u>hello</u></i></b></font>,
you just simply declare it <span
class="biggishPeachOrangeBoldItalicAndUnderlinedComicSansMS">hello</span>
and are done with it!

truly, ingenious!

now if only could i remember in what order those "css parameters" go...

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.

icelava:

wrote:

and if i want a red header : <p class="red header"> or a white <p class="white header">

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.



<p class="Warning header">



<p class="Normal header">



<p class="SideNote header">

Mmm…tasty post!

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

Out of runes of magic gold? Need it in urgent? Yes, I can understand you. As the most important currency, without rom gold, you ever can’t do anything. So you need to buy rom gold from those most professional and loyal game online shops with years’ experience and have a good reputation among players. Is there any difficult? No, when you need the rom gold, please feel free to contact us, we are promising to offer you the cheap runes of magic gold with fastest delivery. Moreover, we are online 24/7, you can contact us any time with any question about. So why are you still irresolute? Come here to grab your cheap runes of magic gold now. Crazy about running warhammer gold? Yup, it is so crucial indeed for us in Warhammer Online. Without it, we can even do nothing, without money to buy items, weapons and so on. So enough warhammer gold is substantial.