Inline Styles vs. CSS

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.

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.

--

--

Eng Core Automation @Tesla, ex @webflow, React, CSSinJS and co. Creator of http://cssinjs.org. Stealing ideas is great. Semantics is just meaning. Twitter: htt

Love podcasts or audiobooks? Learn on the go with our new app.

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
Oleg Isonen

Oleg Isonen

849 Followers

Eng Core Automation @Tesla, ex @webflow, React, CSSinJS and co. Creator of http://cssinjs.org. Stealing ideas is great. Semantics is just meaning. Twitter: htt