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

Assuming that you are using external stylesheets, an additional benefit on top of those previously mentioned is caching. The browser will download and cache your stylesheet once, and then use the local copy each additional time it is referenced. This allows your markup to be more compact. Less markup to transfer and parse means a more responsive feel and better experience for your users.

Answer 2

I can think of only two situations where inline styles are appropriate and/or reasonable.

1. If inline styles are programmatically applied. For example, showing and hiding elements with JavaScript, or applying content specific styles when rendering a page (see #2).

2. If inline styles complete a class definition for a single element in cases where id's are neither appropriate or reasonable. For example, setting the background-image of a element for a single image in a gallery:

HTML

<div id="gallery">
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
    <div class="image" style="background-image:url(...)">...</div>
</div>

CSS

#gallery .image {
    background: none center center;
}

Answer 3

For this thread to be complete, it is worth mentioning that inline styles are the only way to go in GMail when you create HTML+CSS emails.

For detailed information see: http://www.email-standards.org/clients/gmail/

Answer 4

If the choice was there, my first preference will be classes/other selectors. However, there are situations where inline styles are the only way to go. In other situations, just a CSS class by itself requires too much work, and other types of CSS selectors make more sense there.

Suppose you had to zebra stripe a given list or table. Instead of applying a particular class to each alternate element or row, you could simply use selectors to do the job. That will keep the code simple, but it won't be using CSS classes. To illustrate the three ways:

Using only class

.alternate {
    background-color: #CCC;
}

<ul>
    <li>first</li>
    <li class="alternate">second</li>
    <li>third</li>
    <li class="alternate">fourth</li>
</ul>

Using class + structural selectors

.striped :nth-child(2n) {
    background-color: #CCC;
}

<ul class="striped">
    <li>first</li>
    <li>second</li>
    <li>third</li>
    <li>fourth</li>
</ul>

Using inline styles

<ul>
    <li>first</li>
    <li style="background-color: #CCC">second</li>
    <li>third</li>
    <li style="background-color: #CCC">fourth</li>
</ul>

The second way looks the most portable and encapsulated to me. To add or remove stripes from any given container element, simply add or remove the striped class.

However, there are cases where inline styles not only make sense, but are the only way to go. When the set of possible values is huge, it will be stupid to try to make classes in advance for each possible state. For example, a UI that allows the user to dynamically place certain items anywhere on the screen by dragging. The item will have to be positioned absolutely or relatively with actual coordinates such as:

<div style="position: absolute; top: 20px; left: 49px;">..</div>

Surely, we could use classes for each possible position the div can take, but that's not recommended. And one can easily see why:

.pos_20_49 {
    top: 20px;
    left: 49px;
}
.pos_20_50 {
    top: 20px;
    left: 50px;
}
// keep going for a million such classes if the container size is 1000x1000 px

<div class="pos_20_49">..</div>