Inline CSS style (again!)

[optik]

I've been conforming to the mantra that inline CSS styles are to be avoided, but am still finding situations where it seems more appropriate.

The typical situation is fine positioning of unique elements, say an image that appears only on one page and requires a 2px margin-top style and nothing else.

I've been looking around some sites and apple.com seems to have a pretty rigorous no inline style policy however to compensate for all the extra external CSS this creates they have multiple style sheets with typically 3-4 linked on one page, one of which is often unique to that page or maybe only a very small number of pages with plenty of use once only declarations, this we are lead to believe is also bad practice and a site should function from one style sheet.

If I wanted to adjust the spacing of my example image, inline seems far quicker than hunting down the line in the right CSS file and doing it there, and if this style is only used once in the site caching of the CSS file is of no advantage, so have Apple got it wrong on this one or am I missing something?

[SevenCubed]

I would say overall it's a matter of personal preference. I am extremely fussy when it comes to sending back anything unnecessary to the client. Some might say it's an obsession but I love getting a page down to the bare minimum. It pays off, a few bytes here and there and overall the sites running on my server load faster than 97% of the sites on the internet (according to GWT labs).

In my case for my own site I use 4 base style sheets to compensate for all possible page configurations that I have. On any given page I never refer to any more than 1 style sheet. But like you point out here, there are instances where use of a single style is required and without hesitation whenever that is the case I will apply it inline rather than have yet another external stylesheet which inturn invokes yet another http request to the server. Multiplied by hundreds of page views (locally focused traffic) per day it all adds up. IMO inline styles have there merit.

[rocknbil]

I treat it the same way you treat classes versus id'ed elements. Multiple times on a page=class, once, id, right?

If I have **one** element that needs a push, maybe two, ok, I'll let it go inline. If there are many, it goes in the CSS. Have an example from yesterday, a series of sponsor logos all different sizes, to get them all to line up vertically and horizontally every one needed a separate set of widths and margins. I developed it inline, them moved it externally on deployment.

Another exception is dealing with some CMS's that don't allow you to do it as right as you would like.

[optik]

My methodology is at the moment if a style can be grouped sensibly in a class then it should be otherwise leave to inline.

I guess that's because I'm using style sheets as a way to refine my code structure/performance, what Apple and others who see it in more black and white terms seem to be doing is using style sheets for structure/performance and also to separate design from content.

I suppose because I've never styled a site just with CSS and someone else's HTML I can't see the purpose of this but I can see the possible benefit in a larger organisation. So supposing Apples designers just chop up images and alter CSS, how would they know what goes where in an effective way, the only methods I can think of seem pretty long winded such as using firebug to find out the names of container elements or would they be given some kind of page diagram?

[SevenCubed]

If you are trying to untangle someone's else's work it helps to have a real good developer tool to do it with. There is an add-on for Firefox aptly named "web developer" that is invaluable when trying to imagine what a visual layout of CSS would look like. Specifically there is an option within the add-on called "display topographic information" (it's one about 140 options available). Applied by themselves or combined with each other they take all the guess work out of trying to visualize elements, margins, borders, or whatever you need information about.

[optik]

Not trying to untangle anything, I'm about to overhaul the CSS for a large site and want to make it as efficient as possible.

It would be good have the designers work solely with CSS and photoshop but I can't see any method for them to understand how to create the CSS in the first place if they aren't familiar with the HTML it refers to, it may be that the designers only edit classes rather than creating them.