What's So Bad About In-Line Css

What's so bad about in-line CSS?

Having to change 100 lines of code when you want to make the site look different. That may not apply in your example, but if you're using inline css for things like

<div style ="font-size:larger; text-align:center; font-weight:bold">

on each page to denote a page header, it would be a lot easier to maintain as

<div class="pageheader">  

if the pageheader is defined in a single stylesheet so that if you want to change how a page header looks across the entire site, you change the css in one place.

However, I'll be a heretic and say that in your example, I see no problem. You're targeting the behavior of a single image, which probably has to look right on a single page, so putting the actual css in a stylesheet would probably be overkill.

Is it bad practice to use inline styles?

Yes it is fine. Stylesheets are used mostly to style multiple pages in the same manner and for easier editing. Putting css directly in html also overrides all other conflicting styles.

Is it always bad idea to use inline css for used-once property?

There are lots of reasons why style="" is bad. I consider it a bug anywhere I encounter it in my codebase. Here are some reasons:

1. style= has higher priority than other CSS selectors making it hard to effect changes in the stylesheet; the stylesheet has to work harder to override these.
2. style= rules are hard to find in the code when you need to make global changes.
3. You download this CSS code with every page view.
4. If you have multiple stylesheets for the same HTML codebase your style= rules are not part of the stylesheet and thus are unchangeable.

However, if you are generating content and it's difficult to describe this content in a static CSS file, you might also need to generate the CSS to match that content. It is often easier to simply generate style= rules despite the drawbacks. If, however, your generated content can be easily described in a CSS file, because the generated structure doesn't often change, or because you can easily generate HTML AND a CSS file at the same time, then it's probably better to not use style=.

Some suggestions for alternatives to style= that may be appropriate:

1. Instead of inline styles, use class names. Works well if you have lots of columns in your table that have the same properties, and which you expect to always have the same properties. Then your stylesheet can remain fixed while your HTML is fluid, since the CSS only references classes. This is probably the approach I'd use.
2. Use JQuery or some other javascript library to style your objects programmatically after the page loads.

using inline css - a no-no or okay in certain situations?

Two answers to this one:

1) It's considered good practice to keep your design (css) and your data (html) separate. By adding in-line styles, it makes it more difficult to revise the look of a site, it makes it more difficult for future programmers to modify your site, and is overall NOT the best way to go.

If everything is in a CSS file(s), then you can change the entire design of your site without having to mess with the data (HTML) of the site. This is ideal.

2) Yes, a lot of people still use inline styles very often when tweaking something small, regardless of "best practice".

Is it bad practice to use inline css in asp.net?

Inline CSS is bad, period. It does not matter which framework you're using. In addition to bloating the document (and potentially slowing load time), it also makes it a lot harder to figure out where the heck values are being set -- as a general rule HTML is dynamic and CSS rarely is. This means if you want to change a style value, you are probably looking at one, flat CSS file, instead of a potentially massive codebase.

---

Related Topics