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 .
  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.

Eng. @webflow, React, CSSinJS and co. Creator of . Stealing ideas is great. Semantics is just meaning. Twitter:

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store