Inline styles for one-offs?

Question

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?

Answer 1

I do this, but strictly only with the following rules:

1) An inline style rule must have exactly one property

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

<!--// No!!! --//-->
<ol style="list-style-type:lower-alpha; font-weight: bold; ">

2) Any element with an inline style rule may not contain any descendant elements that have an inline style rule.

<!--// Acceptable --//-->
<ol style="list-style-type:lower-alpha">
    <li>Item One</li>
    <li>Item Two</li>
</ol>

<!--// No!!! --//-->
<ol style="list-style-type:lower-alpha;">
    <li>Item One</li>
    <li style="font-size: small;">Item Two</li>
</ol>

<!--// Instead (example) --//-->
<ol class="product-details">
    <li class="shortdesc">blah blah</li>
    <li class="longdesc">Blah Blah Blah</li>
</ol>

Answer 2

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.

Answer 3

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.

Answer 4

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!

Answer 5

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.

Answer 6

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.

Answer 7

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.

Answer 8

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.

Answer 9

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.

Answer 10

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.

Answer 11

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.