2

I have learned that it is generally not recommended to use @import for page performance. If I put @import at the bottom of my css file and use the style not for the elements at a page load but for the elements for later user interactions, will there still be any performance cost? For example, if I use the style @imported for a popup that user clicks to display, is @import still a poor choice?

sawa
  • 1,930
  • 3
  • 24
  • 33
  • Possible duplicate of [CSS @import Best Practices](http://stackoverflow.com/questions/6912899/css-import-best-practices) – Alon Eitan Jun 26 '16 at 16:03
  • The link suggested does not answer my question on using @import for the styling of the elements to be used for later user interactions. – sawa Jun 26 '16 at 16:10

2 Answers2

0

Why not just use <link>'s appropriately ordered?

Anthony Astige
  • 1,919
  • 1
  • 13
  • 18
0

Yes. Importing another CSS file from a pseudo-class, which is what I assume you meant by "user interactions", will still impact performance. A significantly faster way to achieve the same result is changing the property values through JavaScript event listeners.

serebit
  • 400
  • 2
  • 13
  • Why is there a performance cost when there is no blocking download of css file on page load? – sawa Jun 26 '16 at 16:21
  • @narusawa Because the browser will need to request to download the css file, then parse it. Using JavaScript will negate the need to download. – serebit Jun 26 '16 at 17:35