Turbolinks: Styles get left in head?

[Kiszko]

When navigating between pages, stylesheets unique to a page, get left in the head. Even with no-cache enabled. Do we have control over what stylesheets / scripts we want to persist and what we want to be freshly loaded, between requests?

[nateberkopec]

When navigating between pages, stylesheets unique to a page, get left in the head. Even with no-cache enabled.

This is current turbolinks behavior, yes. See #187.

[Pushplaybang]

This is the expected behaviour for turbolinks.

@Kiszko - what I would recommend, and use with great success, is looking into inlining your critical path CSS in the head, and then loading page or component specific styles in the footer.

This has had the advantage of speeding up rendering on my site tremendously. and reducing page load. I do the same with javascript and have seen a massive performance boost.

[Fudoshiki]

This is wrong way for inline css style tag in head, it must load only style tag from new page

[Fudoshiki]

My own solution https://github.com/Fudoshiki/turbolinks/commit/2ace88c83d31b8e5cf335c65982ab4ce28df0957
Don't keep inline style tags from current page and not paste on new page

[Pushplaybang]

@Fudoshiki - I disagree, using low specificity cascading styles allow you to load the frame of the page, and basic above the fold components,

Additional page specific critical CSS can be loaded after the body opening tag, though I eventually dropped this.

[Fudoshiki]

Inline css this is page content, turbolinks must load only inline styles which present on page, but no transit from previous page

[Fudoshiki]

We speak about

head
  style
    | some styles

Turbolinks shouldn't save this on next page

[Fudoshiki]

Current behaviour

head
  style
    | some styles

click on link
result

head
  style
    | some styles
  style
    | some styles

two style tags with same styles

[Pushplaybang]

turbolinks does not reload the head. but merges,

During rendering, Turbolinks replaces the current element outright and merges the contents of the element. The JavaScript window and document objects, and the HTML element, persist from one rendering to the next.

These styles should either be scoped or only low specifricity as I described, and should only be an issue if your CSS/SCSS is poorly structured.

[Fudoshiki]

scoped css not valid from W3C specifications
turbolinks must merge link rel=style tags but not inline tags

[Pushplaybang]

@Fudoshiki no. and scoping CSS is perfectly valid.

Structure your components by page.

.home {
  .banner {}
  .whatever {}
}

this isn't a bug, its a design.

[Fudoshiki]

Do you mean body style='' ?

[Fudoshiki]

https://css-tricks.com/saving-the-day-with-scoped-css this is not valid now

[Pushplaybang]

@Fudoshiki no.

I mean, simply create a "scope" using page or component specific classes.

[Fudoshiki]

I don't want load all styles for all pages on each page

[Pushplaybang]

then drop your inline style tag after the opening body tag. that will be removed and replaced instead of merged / appended.

Thats pretty much the option available to you with turbolinks.

[Fudoshiki]

example please

[Pushplaybang]

simply add your style tag outside of the head.

  style // global styles ie: normalize, typography, basic layout frame (loaded once)
body
  style // page specific  (replcaed each time)
  <!--  your page content-->

as I load critical css in the head myself (which for a fairly extensive app comes to around 8kb), I simply load page specific chunks just before the closing body tag, this has resulted in very good TTFB and rendering performance.

Its a trade off between first page load speed, and subsequent page load speed.

[Fudoshiki]

I like your point

[Pushplaybang]

I would also suggest that if you find you've got mountains of page specific CSS, see if:

• you can structure your styles to be more general
• see if you have missed potential components
• re-consider your design decisions, you should have a great deal of shared structure, and form, particularly above the fold, to create a seamless user experience.

[Pushplaybang]

@Kiszko - would you consider closing this issue please, if you are satisfied.

[kireerik]

I think a backward compatible solution could be to introduce a data-turbolinks-pageSpecific or a -replace attribute or something like that. However for example meta attributes are erased and then injected. So I think the same behavior should be the default for inline style and script elements defined in the head. In this case we could have a data-turbolinks-permanent or a -global attribute or something like that for example. Which would mean the current behavior for those inline head elements.

[domchristie]

Resolved by https://github.com/turbolinks/turbolinks/issues/249#issuecomment-387147519 Thanks!