[SergioT]

So I came across a situation where I wanted to apply CSS only to a single image. Is using something like this frowned upon?

<img style="float: right; margin-right:30px;" src="images/barrier.jpg" alt="" />

I was thinking of maybe going:

<img class="barrier" src="images/barrier.jpg" alt="" />

.barrier{
    float: right;
    margin-right: 30px;
}

But isn't it a bit overkill to create a separate CSS rule for a single item? Teach me wise ones!

[Kyek]

The second way is correct Think of it this way: All content should be in the HTML, and grouped logically with base elements like divs, lists, paragraphs, etc. All things that specifically affect the style should be in your stylesheet.

That's why people don't use <b>bold</b> tags anymore, because 'bold' is a style that should be in the CSS. So instead, we use <strong>strong tags</strong>. They're bold by default and work just like <b>bold tags</b>, but strong doesn't mean bold. It just means "strong" words should have more emphasis. Imagine if you just wanted to turn those words red instead of bold. This makes sense:

strong {
    font-weight: normal;
    color: #f00;
}

Strong words are normal weight and red. Cool. But imagine applying that to a bold tag instead of the strong tag. Now the "bold" tag is .. not bold? Sure, it'll work, but it's counterintuitive and semantically very wrong.

It may seem nit-picky, but that's the level we go to in order to keep styling completely separate from the HTML . So yeah, inline styles are a big no-no. Only as a very VERY last resort, in the cases where you may not have full control over the stylesheet.

[SergioT]

OK, thank you for the advice; I've modified it to be more correct.

[KiNG]

Yeah! Kyek is right!
I just use inline-css while I'm testing and developing!

[Daniel15]

Kyek is exactly right. For that reason, inline styles were removed from drafts of HTML5 (but it seems they've been readded now). I'd say to always use styles in CSS files.

Having said that, do not ever name your CSS classes things like "image-left" or "large-red-bold-size18", things like that are sematically HORRIBLE. Web developers will hate you. You'll lose all your socks. Your coffee will always go cold. It'll kill a kitten or something. Yes, it's that bad. Think of the kittens! Umm... yeah. I'm not weird at all . It's not really that bad, of course. Nobody will hate you for using inline styles or unsemantic class names. However you should still think about the meaning of the styles (eg. "This class is for the introduction paragraph of the site") as opposed to what they do (eg. "This class makes text bold, dark green and 2em in size), and use that as the class name (p#intro instead of p#biggreenbold or something).

[Kyek]

This post serves as a reminder to go back and read Daniel's post a second time :D

[Daniel15]

Hahah, Kyek, I'm glad you liked it. I wrote a bit more and was like "I'm silly" and removed it. Haha

[DarkCoder]

Daniel15, on 03 June 2010 - 10:36 AM, said:

You'll lose all your socks. Your coffee will always go cold. It'll kill a kitten or something.

LMFAO

[Mack]

Daniel15, on 03 June 2010 - 06:36 AM, said:

Kyek is exactly right. For that reason, inline styles were removed from drafts of HTML5 (but it seems they've been readded now). I'd say to always use styles in CSS files.

Having said that, do not ever name your CSS classes things like "image-left" or "large-red-bold-size18", things like that are sematically HORRIBLE. Web developers will hate you. You'll lose all your socks. Your coffee will always go cold. It'll kill a kitten or something. Yes, it's that bad. Think of the kittens! Umm... yeah. I'm not weird at all . It's not really that bad, of course. Nobody will hate you for using inline styles or unsemantic class names. However you should still think about the meaning of the styles (eg. "This class is for the introduction paragraph of the site") as opposed to what they do (eg. "This class makes text bold, dark green and 2em in size), and use that as the class name (p#intro instead of p#biggreenbold or something).

Another advantage of that, is if I decide I want a green header instead of a red one, I only have to change the CSS. If you named the class p.redtext, and you make that green... well you see the problem

[Daniel15]

Quote

I only have to change the CSS. If you named the class p.redtext, and you make that green

Yeah, a while ago, MySpace had a class "redboldverdana18" or something, and the text was actually orange or blue or something, and not Verdana.

MySpace has gotten a LOT better now, though. When you edit your profile layout, the CSS is actually easy to read . I don't use MySpace any more, but here's my profile's CSS: http://www.myspace.c...serId=173242021

[ShanePerreault]

I would make a css document call it one.css (for all the css rules that are used once ) and then put classes with individual names like...

.img1{
    float: right;
    margin-right: 30px;
}

Put it in that file, so it won't make your primary CSS look hideous. Then just do what they said earlier by doing...

<img src="../images/blah.png" class="img1" alt="">

Also: I put all your CSS docs in a folder called CSS. It just makes it a tad bit more clean. Sorry, I get ANAL (lol to myself) about organization with code and directories.

[magik]

ShanePerreault, on 08 June 2010 - 07:53 AM, said:

I would make a css document call it one.css (for all the css rules that are used once ) and then put classes with individual names like...

.img1{
    float: right;
    margin-right: 30px;
}

Put it in that file, so it won't make your primary CSS look hideous. Then just do what they said earlier by doing...

<img src="../images/blah.png" class="img1" alt="">

Also: I put all your CSS docs in a folder called CSS. It just makes it a tad bit more clean. Sorry, I get ANAL (lol to myself) about organization with code and directories.

The only argument I have against this is sometimes it's better to keep it all in one css file so the browser doesn't have to do another HTTP request to get another CSS file. Having multiple seperate .js and .css files causes the browser to generate more HTTP requests, and thus the webpage may load a few ms slower.

But otherwise, in terms of organization this is a good idea.

[Kyek]

I'm with magik, but much more outspoken You really shouldn't separate your CSS like that, for oh so many reasons:

• The fewer the HTTP requests, the better.
  
• A year down the line, who's going to remember which css you only used once and which you used more than once? You'd have to search two files instead of just one.
  
• You only need some of that css once for now. If you update your site later and need it more than once, you have to change code between files, and that's just a pain.
  
• It's no longer useful to group your CMS. If you have a group titled "Blog Content" and have all the CSS ids and classes to format blog pages, and you're looking for the CSS you used to float an image to the left of the text that one time... it's not there. You'd have to have a separate "Blog Content" group in your one.css file.

If you use concise but proper comments in your CSS file, all those little one-off CSS lines can be organized quite nicely without interfering with how the rest of your CSS looks

[ShanePerreault]

Okay, if you worry about that, then put all your "ones" in a group...

/* @ones */

//your once used code

/* endones */

[KiNG]

I think that there is really no difference between one-time-used rules and other rules! The only thing which is important is logical flow and arrangement of rules!
Why you want to separate one times from others?