Inline Styles vs Classes

Question

In my head, I've always known to use classes over inline styles for any project. But are there any articles/postings/blogs defining the pros/cons of each? I'm in a debate about this, and I cant seem to find the blog post I read a long time ago about this.

Answer 1

There is a simple reason. The point of CSS is to separate the content (HTML) from the presentation (CSS). It's all about accessibility and code reuse.

Answer 2

Use common sense.

Everyone knows that presentation and content should, in an ideal world, be separated. Everyone also knows that this doesn't work very well a lot of the time. We all know that you're supposed to use divs rather than tables for layout, but we also know that for any circumstance where you don't have full control over the content it just doesn't work properly.

Downloading a 500k style sheet to style one element because you've taken every possible style and stuck it in a style sheet will kill your page, downloading 500 smaller style sheets to style your page because you need them all will also kill your page.

Reuse is great in concept, but the reality is that it's only useful in certain contexts. This applies equally to pretty much anywhere the concept exists. If your project does what you want it to do, does so in every reasonable browser, does so in an efficient way, and does so reliably, then you're good to go, it's not dramatically harder to refactor css than is is code.

Answer 3

Inline Styles are definitely the way to go. Just look at http://www.csszengarden.com/ - that would never have been possible with classes and external style sheets...

or wait...

Answer 4

Classes are the re-usable styles that can be added to HTML elements. e.g-

<style> 
   .blue-text{color:Blue;}
</style>

you can use and re-use this blue-text class to any HTML element Note that in your CSS style element, classes should start with a period. In your HTML elements' class declarations, classes shouldn't start with a period. whereas inline style are like e.g-

<p style="color:Blue;">---</p>

So the difference between both is you can re-use classes whereas you can't re-use inline styles.

Answer 5

I can't think of any pros for inline styles.

CSS is all about Progressive Enhancement, and not repeating yourself (DRY).

With stylesheets, Changing the look becomes as easy as changing one line in the HTML code. Make a mistake or the client doesn't like the change? revert to the old stylesheet.

Other advantages:

1. Your site can automagically adjust to different media, such as for printout and for hand-held devices.

2. Conditionally-included CSS fixes, for that gawd-awful browser-that-shall-not-be-named, become a snap.

3. Your users can easily customize the site with plugins like Stylish.

4. You can more easily reuse or share code from site to site.

Answer 6

First of all:

• If the HTML is built or generated independent of the overall site design (e.g. shared template code), then add reasonably-named classes and IDs, linked exclusively to external stylesheet(s). Use sufficient elements to allow for arbitrary CSS manipulation. For example, see the CSS Zen Garden. This applies to ALL CMSes, programs, scripts, and other dynamically-generated site content. The HTML output must contain absolutely no styling or layout of any sort at all. No exceptions.

Assuming you're dealing with static content, then:

• If there's any way you can reuse the style, make it a class and link to a stylesheet.

• If there's no way would ever reuse the style (it's a one-off thing that doesn't make sense anywhere else) then use a <style> block that references the element's #id.

• If the CSS attribute only makes sense in the context of the surrounding HTML (e.g. some usages of clear:) then I inline the style into the element.

A lot of people call this heresy, just like a lot of people denounce any use of goto in modern programming languages.

However, rather than subscribing to stylistic dogma, my view is you should chose the method based on your circumstances that decreases your overall workload the most. Stylesheets add a level of indirection that makes site-level changes easy and helps build consistency. But if you have several dozen classes on each page that are only used in one place, then you're actually increasing your workload, not decreasing it.

In other words, don't do something dumb and confusing just because people tell you it's the right way to do it.