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.
- Selectors is the natural consequence of sharable style rules, however they came to CSS together with a complex selectors specificity concept.
- 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.
- Inline Styles are still good, when you need to animate specific properties of a specific element.
- Inline Styles implement only a subset of CSS. They don’t have media queries, keyframes, pseudo selectors etc.