tags:

views:

101

answers:

10

Do you guys ever use inline styles for one-offs?

For example, I wanted to make just one particular list on my site use letters:

<ol style="list-style-type:lower-alpha">

Is that really so bad? Or would you slap on an ID and then bury it in your big master CSS file where it will be a pain to ever find again?

+4  A: 

No,what you did is right.Inline styles are meant to use for only once.Of course i find many times this is over(ab)used.

Srinivas Reddy Thatiparthy
A: 

I wouldn't slap an id on it, I'd slap a class on it and quickly find it later using my editor's search feature.

Ben S
+1  A: 

I would still put it in the file as a class, if that is what you are doing everywhere else. Imagine if someone else tried to find that style in the master CSS file and spent hours looking for something that was not there.

Additionally, what happens if you decide you like this style and want to use it elsewhere? You would have to put in the master CSS file anyway.

Matthew Jones
I would look it up with some dev tool like Firebug, and immediately see where it got its styling from.
Ivar Bonsaksen
A person would look at the source to find the class name to look for. When they did that, they would see the inline style clearly and not need to open a .css file
MrChrister
I agree with Matthew. Say you or your client decides to make some design changes. Why go through both HTML and CSS files when you can easily change everything that needs to be changed by just altering one file ?
FreekOne
@Matthew, I do agree that inlining should be avoided whenever possible, but I'm pragmatic and therefore I can't say that inlining is forbidden in all circumstances.
Ivar Bonsaksen
A: 

I would class it. If the site will one day be inherited by anyone else, do them a favor and stay consistent. Besides, it will be easier to change if some day you decide lower-alpha no longer works for you.

edl
+2  A: 

No... don't ever do this. Wherever you think there is a one-off, just around the corner lurks a two-off. Then a three. Then a four.

Take the extra 60 seconds to do it right--you, and whomever follows you with maintenance, will be glad you did.

rp
I can always convert it when I need the 2nd occurrence. The problem I find sometimes is naming it appropriately. You think it's a one off, so you give it an ID that's specific to that case, like `login-box` or whatever, and then you want to use it somewhere else.... and then... you either have to rename things, or you start calling things "login-boxes" that really aren't.
Mark
the solution to there is to put a comma #login-box, #some-box {some-css:;}, more reasons to not do it inline...
Kasumi
A: 

You should still put it in the CSS file. I have a mental model that says styling = CSS. If it's not in the CSS, I would frankly get confused down the line.

Also, what if you find yourself wanting to use the style again. I mean you say it's for ONE item now, but who knows.

It's just good practice to use css/classes, and it'll usually pay off.

Mark
+3  A: 

The presentation of your problem reveals a further issue that is affecting your decision: either inline the style or hide it in a large CSS file.

You know that placing the relevant styling rules in a CSS file is the better choice. You want to place the relevant styling rules in a CSS file but are daunted by the task of managing the CSS file.

Defining the styling rules inline is less painful than maintaining a large CSS file. The problems you are facing with a large CSS file are only going to get worse the more the project grows.

You need to break the large CSS file into a set of more managable CSS files.

A set of CSS files can be much easier to manage if they are sensibly named and contain appropriately-grouped rules. You may opt for one CSS file for layout, one for typography, one for colours and perhaps one per page for each page that is significantly different.

A set of CSS file is easier for you, a single CSS file is better from an end-user performance perspective.

Resolving these two conflicting needs is straightforward: develop with a set of CSS files and have your build process combine these into a single (minimised!) CSS file.

Jon Cram
+1  A: 

For me the #1 reason to always avoid inline styling is predictability in large projects involving several designers/developers.

Say you've added your one-off inline style to that ordered list, then another participant want to add some general styling to all ordered lists through your mammoth style sheet. Since your site/project is so large, he is likely to never notice your one-off hack, and therefore will believe that the new styling also applies to your ordered list, not realizing you've overridden the styling with your inline styles.

But if you're the only person maintaining this project... go ahead!

Ivar Bonsaksen
+1  A: 

I would put it in a class, but define the class in inline CSS in the page. Then, if you need to expand to using it elsewhere, you can just move the class into a shared CSS file.

Also, I agree with the other answer noting that Firebug or similar can track down where any particular piece of styling comes from, so making "where's that coming from?" obvious is no longer a highly-weighted concern in my book. It's good to do when it's trivial, but not worth trading off on other measures for.

Walter Mundt
A: 

I vote for inlining. If this style is truly special to this one particular instance, that's a perfectly fine place to define it, and it saves you from a bloated and hard to maintain CSS file, especially if you have a large site and you're using a single CSS file for your entire site.

The argument that "CSS is where I look for styles" simply means you're being lazy.

The argument that someone would take hours to find this if it was inline rather than in the CSS means they are not a very good web developer.

The argument that someone else is going to want to globally change the style for say "<li>" later and will miss this instance is actually a good reason TO inline it. If you know you want this to be a unique style, than make it so, either via specificity in your CSS or inline, but I vote the latter.

daryn