Jump to content

separate text styling from div styling?


j22cal

Recommended Posts

I was curious if I was doing this correctly. Normally, if I have text inside of a div, I will separate the styling out like so:

 

<div id="one"><span>text</span></div>

 

#one {
width: 500px; height: 300px; background: red; ... etc
}

#one span {
font-size: 1.0em; color: #fff; padding: 20px; display: block; ... etc
}

 

My thoughts were that it is a good idea to separate the content out like this. Is this necessary and a good practice?

Link to comment
Share on other sites

I would say that this is bad style, actually. The less code you write, the better -- there is less potential for errors, will give you a slight speed increase, and it will be easier to read and understand later. There's absolutely no reason to have that span within the div -- just add the text styling to the div itself.

 

If you want, though, you could separate the styling within your css code. For example:

 

/* Div styling */
#one {
width: 500px; height: 300px; background: red; ... etc
}

/* Text styling */
#one {
font-size: 1.0em; color: #fff; padding: 20px; ... etc
}

Link to comment
Share on other sites

I think my original incentive for doing it that way was because there is some kinda bug in IE6 when you apply margin(or padding, can't remember) to an element that already has a width. And that was just my way to eliminate that problem. Is that logical, or is there a better way to avoid that problem?

Link to comment
Share on other sites

I think my original incentive for doing it that way was because there is some kinda bug in IE6 when you apply margin(or padding, can't remember) to an element that already has a width. And that was just my way to eliminate that problem. Is that logical, or is there a better way to avoid that problem?

 

True, IE6 does handle width differently due to the box model issue. In that case, what you are doing above is fine, but I would only do that for cases where you specifically need to avoid that issue. In most cases, you shouldn't need to define both a width and padding/margin on the same element. And I usually use a div, rather than a span, since it already is display:block and technically (you aren't doing this, but it could happen if you revise the code in the future) you can't place block level elements (divs, p tags, etc) within spans.

Link to comment
Share on other sites

  • 3 weeks later...

ok, thanks. I will abandon this practice then...

 

Are there any other scenarios where setting the code up with divs(span, p) inside of divs for the font styling would be applicable?

 

I wouldn't completely abandon this practice because it is useful in other situations. For example if you were in the situation below it would be useful.

 

<p class="price">$<span>10.00</span></p>

 

This would allow you to style the $ sign and the actual dollar value independently. Lets say for some crazy reason you wanted the $ to be bold and the actual 10.00 to be italic. You would use the CSS below.

 

.price { font-weight: bold; }

.price span { font-weight: normal; font-style: italic; }

 

Of course you could shorthand the Font property but for simplicity sake I just split it into weight and style. In other words because in your example you wrapped all of the content in a div and the span tag it has no purpose, but in the example I presented the dollar sign is outside of the span tag. Hope this helps.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...