Welcome to WebmasterWorld Guest from 107.20.110.201

Forum Moderators: not2easy

Message Too Old, No Replies

Multiple CSS Classes

One element, multiple styles...

     

pageoneresults

2:32 am on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



A couple of years ago a long time and well respected member, papabaer [webmasterworld.com] posted one of the most enlightening CSS tips; Multiple CSS Classes.

I've not seen much discussion around here lately concerning this time saving and excellent CSS tip. I've been working with a lot of tabular data lately and have been styling tables via CSS. During the initial configuration of the stylesheet, I knew I would be using the Multiple CSS Classes tip for the design of those tables. It goes something like this...

/* Cell Alignment Horizontal */

.tac{text-align:center;}
.tal{text-align:left;}
.tar{text-align:right;}

/* Cell Alignment Vertical */

.vab{vertical-align:bottom;}
.vam{vertical-align:middle;}
.vat{vertical-align:top;}

The above covers the basic styles for the alignment of the cells and is just an example to show how the following combination of Multiple CSS Classes works. Now the

<table>
code...

<table>
<tr>
<td class="tal"></td>
<td class="tac"></td>
<td class="tar"></td>
</tr>
<tr>
<td class="tal vat"></td>
<td class="tac vam"></td>
<td class="tar vab"></td>
</tr>
</table>

In the above example, I have cells that are aligned horizontally left, center and right. I have cells that are aligned vertically top, middle and bottom.

You could also end up combining many CSS classes to achieve various styling effects on your elements...

.blue{color:#369;}
.tdu{text-decoration:underline;}
.ttu{text-transform:uppercase;}

<p class="blue tdu ttu">[blue]BLUE UNDERLINED UPPERCASE CONTENT.[/blue]</p>

The possibilities are limitless. How many of you are taking advantage of Multiple CSS Classes?

vkaryl

2:38 am on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Weeeellll..... I wasn't, but I bet I do now! Missed that the first time around, I guess, and I do have sites that need table functionality.

Thanks por - that's an extremely useful post for me just now!

Rambo Tribble

2:40 am on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Yo. I didn't realize it was a "best-kept secret" kinda thang. Eric Meyer covers it in some of his books.

pageoneresults

2:57 am on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member pageoneresults is a WebmasterWorld Top Contributor of All Time 10+ Year Member



Eric Meyer covers it in some of his books.

I haven't read any of the books yet. All of my CSS knowledge has come from trial and error along with reading here and other reputable resources.

Sometimes these simplest of things get passed by.

photon

1:13 pm on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I've been using multiple classes for a new web site I'm developing. Each section is color coded. So I have a class defined for each section that is simply the color for that section. It then gets applied to the appropriate places along with whatever other classes may apply.

That's just the tip of the iceberg, but I'm learning other ways to use that technique as I go along.

quesera

3:37 pm on Sep 21, 2004 (gmt 0)

10+ Year Member



This technique definitely has its applications (the one I use all the time is class="primarynav on"), but it can be taken too far.

The real power of CSS is the ability to separate content from appearance/layout. The more specific and single-purpose you make your classes, the less separation you have -- and although you get more powerful rendering control than with straight HTML, you lose the flexibility and maintainability of CSS.

Also, there are many arguments against putting rendering details into class names. I'm not as religious as some about this issue, but it does make sense: If class="centered blue bold" (as an extreme example), what happens when you want to change the color to red? You could redefine class "blue" to be "color:#ff0000", but that would be fairly antisocial. So you have to change all of the HTML pages to be class="centered red bold", which ignores the real power of CSS.

drbrain

5:22 pm on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



I prefer to use repetetive HTML layout and complex selectors over multiple classes.

Hrm, wait, no. That's not true.

I used to prefer repetetive HTML layout and complex selectors over multiple classes.

Then I simplified my HTML even more, making it smaller and lighter, and no longer need either.

There's a step *after* learning CSS that's rather difficult to see or take advantage of. Once you've move all your style away from the HTML you should try to make your HTML simpler, then make your CSS simpler, then repeat until you have as little as possible of either.

createErrorMsg

8:07 pm on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Once you've move[d] all your style away from the HTML you should try to make your HTML simpler, then make your CSS simpler, then repeat until you have as little as possible of either.

Zen and the Art of Web Design. Nirvana is achieved when you have a liquid, three-column, source-ordered, templatized, database supported site with only this code on every page...

<></>

;)

Rambo Tribble

10:21 pm on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Getting a bit verbose there, createErrorMsg:

< />

jetboy_70

10:37 pm on Sep 21, 2004 (gmt 0)

10+ Year Member



Nirvana is achieved when you have a liquid, three-column, source-ordered, templatized, database supported site with only this code on every page

Well, it sure doesn't feel like nirvana from here, even with fixed width left and right columns! ;)

buckworks

10:47 pm on Sep 21, 2004 (gmt 0)

WebmasterWorld Administrator buckworks is a WebmasterWorld Top Contributor of All Time 10+ Year Member



<></>

Will that validate?

jetboy_70

10:52 pm on Sep 21, 2004 (gmt 0)

10+ Year Member



Those who have reached true enlightenment will no longer need to validate, my child. ;)

MatthewHSE

11:01 pm on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Hey Jetboy, you've been mysterious about your "Holy Grail" layout for months now! Is it finished and ready for us in the general public to scramble over? ;)

[webmasterworld.com...] (Msg. 4)

(Actually, I've come up with one of my own that's pretty good; probably not as good as yours but it works for me!)

jetboy_70

11:09 pm on Sep 21, 2004 (gmt 0)

10+ Year Member



Cool. Glad you've got something going. isitreal's also making noises about having done one, and to be honest, Ryan Brill's A List Apart article wasn't far off.

Would multiple multi-column layouts on one page, including nested sections be worth waiting a little longer for?

MatthewHSE

11:27 pm on Sep 21, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Sure it's worth waiting for! I've seen isitreal's design and it's probably the best I've seen if you want totally fluid and full-height columns are important. My layout requires fixed-width side columns, so I had to invent my own. Works quite well; I'll try to post the code in the next couple of days for people to pick apart! ;) I vaguely remember that preview you stickied me, Jetboy, of your design, and if I'm remembering correctly, it's better in at least some aspects than mine. Between us all, if we make a concerted effort, there must be a real solution somewhere!

createErrorMsg

1:08 am on Sep 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Getting a bit verbose there, createErrorMsg:
< />

Ah...behold the Transcendant Self-Closing Tag!

vkaryl

1:11 am on Sep 22, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



*off topic as usual*

I want to see ALL THREE layouts, guys. isitreal's, jetboy's, and matthew's - bated breath time here....

SuzyUK

7:52 am on Sep 22, 2004 (gmt 0)

WebmasterWorld Senior Member suzyuk is a WebmasterWorld Top Contributor of All Time 10+ Year Member



hey.. so would I like to see all three ;)

let's get back on topic tho'

Multiple Classes
Thanks for bringing that great post back up p1r

I've been aware you can use them, but have only ever had occasion to use them in the body element as a way to distinguish different page layouts (one class) and decide menu status (second class), and that's only becuase the ID was used up with a body signature, so even that wasn't "necessary".

I've felt like using them within the HTML is akin to too much classification, like using <font> tags almost, and also it generally tends to break the 'rule' of naming for function and not appearance.

It's a useful thing to know/remember if debugging or adding to an existing stylesheet that already has lots of classes in place.

There's probably exceptyions that would warrant theirn use and the table example is possibly one. It would be well suited to using <colgroup> and <col>, IE wins the prize for support this time.. but the others don't support these elements, oh. .. choices :)

Suzy

TheDoctor

7:48 pm on Sep 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



papabaer's post must have been one of the first things I read when I first came to Webmaster World (I came here for this forum), and it helped me sort out my CSS no end.

But in the end, I didn't use the technique that much, more or less for the reasons stated in drbrain's post. What the technique did was helped me understand more clearly what CSS was about and helped unbung my creativity.

It's something every web designer needs to know about and have in their toolkit as an option. But it's not something to use simply because it's there (a bit like all the other things inn the toolkit, really).

MatthewHSE

8:06 pm on Sep 23, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Somehow I missed drbrain's post the first time through this thread. Upon going back and reading it, the concept of "no longer needing either" sounded very familiar. Looking at my own markup these days, I can see where I've been, where I am, and where I'm headed. And I have to say, he's right. It's difficult to define how to trim down CSS and your markup to achieve a minimal use of either, but I'm on the way! ;)
 

Featured Threads

Hot Threads This Week

Hot Threads This Month