Prev: rows of thumbs
Next: proper and portable way to group elements
From: shapper on 5 May 2008 14:26
Hello,

I am creating a message to display on my web sites. The HTML markup is
as follows:

<div class="Error">
<h3>
<img id="Icon" src="Images/Error_Icon.gif" alt="Icon"
style="border-width: 0px;">
<span>Header</span>
</h3>
<p>Description</p>
</div>

And the CSS:

div.Error
{
background-color: #FFD9D9;
border: solid 1px #FF9595;
padding: 0.4em;
position: relative;
min-height: 1.25em;
width: 120px;
}
div.Error h3 {}
div.Error h3 img {vertical-align: middle;}
div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva,
sans-serif;}
div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-
serif;

I have 3 types of messages: Warning, Error and Success.

The only difference between the CSS of each message is the colors
properties.

Should I use a class named Message to define all common properties and
then 3 other classes: Error, Warning and success to define the color
properties:

<div class="Message Error">

Or should I use three different classes?

How is this usually done?

Any other advice on how I am building my message is welcome to.

Thanks,
Miguel
From: Harlan Messinger on 5 May 2008 14:39
shapper wrote:
> Hello,
>
> I am creating a message to display on my web sites. The HTML markup is
> as follows:
>
> <div class="Error">
> <h3>
> <img id="Icon" src="Images/Error_Icon.gif" alt="Icon"
> style="border-width: 0px;">
> <span>Header</span>
> </h3>
> <p>Description</p>
> </div>
>
> And the CSS:
>
> div.Error
> {
> background-color: #FFD9D9;
> border: solid 1px #FF9595;
> padding: 0.4em;
> position: relative;
> min-height: 1.25em;
> width: 120px;
> }
> div.Error h3 {}
> div.Error h3 img {vertical-align: middle;}
> div.Error h3 span {color: #B30000; font: bold 1.0em Georgia, Geneva,
> sans-serif;}
> div.Error p {color: #B30000; font: normal 0.8em Arial, Geneva, sans-
> serif;
>
> I have 3 types of messages: Warning, Error and Success.
>
> The only difference between the CSS of each message is the colors
> properties.
>
> Should I use a class named Message to define all common properties and
> then 3 other classes: Error, Warning and success to define the color
> properties:
>
> <div class="Message Error">
>
> Or should I use three different classes?

The multiple class approach may make sense, especially since it leaves
you flexible to add another 30 message types without having to add
selectors for them in your CSS (except for the properties that
distinguish their treatment from other message types).

But surely all your messages are contained within another element,
whether DIV or UL or OL, so you can *really* just give this containing
element class="MessageList" and use

ul.MessageList h3 { /* props common to h3 in all message types */ }
div.Error h3 { /* props specific to h3 in error messages */ }
div.Warning h3 { /* etc. */ }

This gives you the same advantage, without the disadvantage of having to
add a Message class to each of your messages individually.
 | 
Pages: 1
Prev: rows of thumbs
Next: proper and portable way to group elements