Inline Styles vs. CSS

Let me clean up some fundamental differences between those two.

Local vs. global

Inline Styles can be provided to the DOM by using different API’s. For e.g. using node.setAttribute(‘style’, ‘color: red; padding: 20px;’) or by using node.cssText = ‘color: red; padding: 20px;’ or node.style.color = ‘red’;. No matter which one, they are all called inline styles, because they are applied directly to a specific element.

Regular CSS is created within document scope using a style element or loaded from a remote resource. It’s rules can apply to any elements in that document using selectors.

Consequences

1. Selectors is the natural consequence of sharable style rules, however they came to CSS together with a complex selectors specificity concept.
2. Style rules defined inline can not be reused between many nodes. They need to be defined and parsed over and over, even if they are exactly the same.
3. Application of inline styles to every element from JavaScript has a reasonable overhead in the library layer responsible for that.
4. Inline Styles are still good, when you need to animate specific properties of a specific element.
5. Inline Styles implement only a subset of CSS. They don’t have media queries, keyframes, pseudo selectors etc.