Classes

JohnnyP1 · Jul 11, 2007

Hey guys,

I was wondering if you guys can give me your opinions on this technique. I want to create several classes and just call literally half a dozen on a single html element. IE

Code:

<style>
.b {font-weight:bold;}
.i {font-style:italic;}
.center {text-align:centerl}
.left {text-align:left; float:left;}
.right {text-algin:right; float:right;}
</style>
<div class="b i center">This text is bold, italics, and centered</div>

Are there any draw backs that I'm not thinking of? It seems like a pretty good idea and I was wondering why I haven't seen it around much.

Thanks,
Johnny

Vragabond · Jul 11, 2007

What exactly are you asking us? I think that:

1. There is nothing wrong with calling several classes in one element, actually, I am very fond of that idea and I think it is severely underused. There are no drawbacks in having multiple classes in one element.

2. I do not like the classes you are using in your example however, because they actually describe the appearance of the text rather than its function. If you have a class called .important, you can make it look bold and red. And if someone complains that bold and red is not pretty and it should be underlined and blue, you simply change the css and everything stays the same. If your class were called .BoldRed, having that class produce text that is blue and underlined would be confusing. In that case you would need to change your html for the sake of visual style and that would contradict the separation of content and style.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

BillyRayPreachersSon · Jul 11, 2007

There are no drawbacks in having multiple classes in one element.

Except in IE6 where having multiple classes can cause headaches, for example:

Code:

<html>
<head>
	<style type="text/css">
		.green {
		   color: #00CC00;
		}
		.red {
		   color: #CC0000;
		}
		.green.red {
		   color: #CCCC00;
		}
	</style>
</head>

<body>
	<p class="green">This should be green</p>
	<p class="red">This should be red</p>
	<p class="green red">This should be yellow</p>
</body>
</html>

It's only an issue if you try and style items with both classes, as items with the last single class specified in the rule will also change.

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

1DMF · Jul 13, 2007

nice one guys, never knew you could do this

class="b i center">

cool!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

Rieekan · Jul 16, 2007

Let's not forget that by using classes to change the look of the text, screen readers won't know to process the text any differently for visually impaired users.

As a real world example, say you're using bold and italics to make text stand out and be emphasized by users, well, unless you use the or tags, a screen reader won't know that they're supposed to speak those words or phrases differently.

- George

1DMF · Jul 17, 2007

Yes George, though there is a big debate on this.

 and aren't deprecated yet, but my understanding is they will be in X/HTML2.0 so then what?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

Vragabond · Jul 17, 2007

and are not the same as and , even if most visual user agents render them the same.

___________________________________________________________
[small]Do something about world cancer today: PACT[/small]

1DMF · Jul 17, 2007

very true Vragabond, I think George was getting at the fact if we remove all text formatting from the HTML code and put it in the CSS, which eventually I see this happening, where does that leave screen readers.

Are they just going to have to learn to read CSS and apply the relevant emphasis while speaking to the listener.

Or is there going to be a split in a website and you'll have to have two versions , HTML for Accessibility and X/HTML for all 'normal' browsers.

X/HTML standards and accessibility is getting to an impass, how do you see it panning out in the future?

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

ChrisHunt · Jul 20, 2007

Are there any draw backs that I'm not thinking of?

Yes. You're defeating much of the point of using a CSS stylesheet in the first place.

One of the key benefits of defining the presentation of your site in a separate file is that it makes it easy to change it.

Let's suppose that the bold, italic, centred styles that you defined in your thread are going to be applied to "important" text within your site. Let's also suppose that, once you've seen it in place you decide that you want to change it - say remove the italics or change the colour or whatever. Under your scheme, you've got to go though the HTML and change all the classes to reflect the change. Really, you're no better off that if you'd used , and <center> elements.

Now, suppose you'd coded it like this:

Code:

<style>
.important {
   font-weight:bold;
   font-style:italic;
   text-align:center;
}
</style>
<div class="important">This text is (currently) bold, italics, and centered</div>

All your presentation is in one place. You can change it in minutes.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

1DMF · Jul 20, 2007

Let's also suppose that, once you've seen it in place you decide that you want to change it - say remove the italics or change the colour or whatever.

I find this a two edged sword though, sometimes I have lets say a class of .important, bold , italic.

like you say maybe you decide on ONE page you don't like the bold or the italic, great change the CSS but that changes the site globally and you may only want to change the italic or bold on that ONE specific page.

You still end up having to edit the HTML to change the class name being used anyhow.

So it doesn't always mean you only need to change the CSS, you still sometimes have to edit the HTML as well!

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

ChrisHunt · Jul 20, 2007

That's actually another benefit of CSS - it encourages you to be consistent across all your pages. That's why it's called a "style sheet". In conventional publications, a style sheet sets the presentational rules for the whole document and discourages a page-by-page approach.

Of course you can still tweak individual instances when required - but it really isn't required all that often if your design is working properly.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd

1DMF · Jul 20, 2007

But the learning curve can be a right pain in the *** , just like weening yourself off of tables!!!

But hey, I guess it makes coding pages forever interesting and chalenging

"In complete darkness we are all the same, only our knowledge and wisdom separates us, don't let your eyes deceive you."

"If a shortcut was meant to be easy, it wouldn't be a shortcut, it would be the way!

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Classes

JohnnyP1

Programmer

Vragabond

Programmer

BillyRayPreachersSon

Programmer

1DMF

Programmer

Rieekan

Programmer

1DMF

Programmer

Vragabond

Programmer

1DMF

Programmer

ChrisHunt

Programmer

1DMF

Programmer

ChrisHunt

Programmer

1DMF

Programmer

Similar threads

Part and Inventory Search

Sponsor