What's the Difference Between Inline Styles VS Classes

What's the difference between inline styles vs classes?

There is a simple reason. The point of CSS is to separate the content (HTML) from the presentation (CSS). It's all about accessibility and code reuse.

CSS which takes precedence, inline or the class?

Generally speaking we can say that all the styles will "cascade" into a new "virtual" style sheet by the following rules, where number three has the highest priority:

1. Browser default
2. Embedded and external stylesheets. Later has precedence over earlier. There IS NOT any inherent difference between embedded and external.
3. Inline style (inside an HTML element)

Source (Edit: of original incorrect information, since corrected both here and there): w3schools

W3schools explains a lot about CSS and also goes through and shows examples of most things you can do with CSS. Always a good resource if you have questions about something. (Edit: debatable, they were the source of the original wrong answer.)

What is the actual difference between using an inline-style and using a css-in-js library like styled components in React?

First, your styled.div example is wrong, as in CSS-in-JS you write actual CSS and not an Object-like style:

// "Real CSS"
const Div= styled.div`
  background: blue;
  color: white;
`

Second, CSS classes are generally better, also, inline styles are considered bad practice as it is hard to re-use and maintain styles.

CSS classes are generally better for performance than inline styles.

So in conclusion:

1. In inline styles, you write Object-like styles vs. actual CSS
2. Writing CSS allows all the benefits of CSS (like selectors).
3. Re-use and maintaining CSS is much easier than inline styles.
4. The real debate is between CSS-in-JS vs. CSS modules vs. SASS vs. Normal CSS (for that you can google or read related questions in SO).
5. Inline styles considered bad-practice as in addition they override all defined styles.
6. Inline-styles are limited in their functionality (try animating something in inline style or even implementing a media query).

using inline style object with react vs using normal css classes

I would go for external CSS classes. If you would not use it, use will not be able to reuse common styles. Also, in the end your code will be bigger(more chars - more size) once you finish the project.

Inline styles take more size in the DOM, are converted more slowly
from VDOM (have probably a bigger impact on memory), and take more
time to be handled by the browser.

This is taken from an great article that I think will make things clear for you.

External CSS vs inline style performance difference?

The performance boost that your friend mentioned is probably too trivial compared to the amount of performance boost (through other factors) using a CSS file.

Using the style attribute, the browser only paints the rule for that particular element, which in this case is the <div> element. This reduces the amount of look up time for the CSS engine to find which elements match the CSS selector (e.g. a.hover or #someContainer li).

However, putting styling at element level would mean that you cannot cache the CSS style rules separately. Usually putting styles in CSS files would allow the caching to be done, thus reducing the amount of load from the server each time you load a page.

Putting style rules at the element level will also make you lose track of what elements are styled what way. It might also backfire the performance boost of painting a particular element where you can repaint multiple elements together. Using CSS files separates the CSS from HTML, and thus allows you to make sure that your styles are correct and it's easier to modify later on.

Therefore if you look at the comparison, you would see that using a CSS file has much more benefit than styling at element level.

Not to forget when you have an external CSS stylesheet file, your browser can cache the file which increases your application efficiency!

Inline style tags vs. inline css properties

Style rules can be attached using:

• External Files
• In-page Style Tags
• Inline Style Attribute

Generally, I prefer to use linked style sheets because they:

• can be cached by browsers for performance; and
• are a lot easier to maintain for a development perspective.

However, your question is asking specifically about the style tag versus inline styles. Prefer to use the style tag, in this case, because it:

• provides a clear separation of markup from styling;
• produces cleaner HTML markup; and
• is more efficient with selectors to apply rules to multiple elements on a page improving management as well as making your page size smaller.

Inline elements only affect their respective element.

An important difference between the style tag and the inline attribute is specificity. Specificity determines when one style overrides another. Generally, inline styles have a higher specificity.

Read CSS: Specificity Wars for an entertaining look at this subject.

I hope that helps!

---

Related Topics