0

From an encapsulation point of view linking section-specific stylesheets makes a lot of sense using link in the body; however, using <link> in the body is considered bad practice. Should I have all the stylesheets for every single section in the <head> or is using <link> inside Liquid sections a better idea because body linking is a bad idea?

All stylesheets in <head> approach

<head>
    {{  'theme-wide-styles.css' | asset_url | stylesheet_tag }}
    {% if page.url == '/pages/page-with-some-section' %}
        {{ 'section-stylesheet.css' | asset_url | stylesheet_tag }}
    {% endif %}
</head>
<body>
    {%- section 'some-section' %}
</body>

Pros: Considered better practice

Cons: <head> gets messy with a large number of templates


Section stylesheet in Liquid section approach

<head>
    {{  'theme-wide-styles.css' | asset_url | stylesheet_tag }}
</head>
<body>
    {%- section 'some-section' %}
</body>

some-section.liquid

{{ 'section-stylesheet.css' | asset_url | stylesheet_tag }}
<div>
    section content.....
</div>

Pros: Uses encapsulation to create a cleaner layout

Cons: <link> stylesheets in body while technically not incorrect, are considered bad practice.


MDN says it's bad practice, but I feel like with Liquid it makes it a lot of sense for complex sites.

MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/link

  • 1
  • @MaximillianLaumeister interesting, thanks for the links. So, those answers seem to suggest using style in the body is very situational. I didn't know it was used fairly often in CMSs, but makes sense. With the WHATWG 'living' HTML standard it sounds like <style> is not allowed, but after some digging it looks like <link> is allowed as long as it has a 'body-ok' itemprop or rel html.spec.whatwg.org/#allowed-in-the-body – Chris Hayes Feb 5 at 18:38
  • Very interesting. This is the first I've heard of that body-ok attribute. In any case, I use lots of stylesheets in body for my templated Jekyll site, and I don't worry about it, so there's one data point. – Maximillian Laumeister Feb 5 at 18:42
  • For anyone passing through, the stylesheet_tag in {{ 'section-stylesheet.css' | asset_url | stylesheet_tag }} produce a 'body-ok' rel attribute. So, technically even with the change in HTML standards, <link> in the body looks safe for now. Whether it actually should go in the body seems pretty situational and opinionated. But, in my case and with news sites using this practice widely already, I feel safe adding using <links> in interest of readable/maintainable Liquid code. – Chris Hayes Feb 5 at 18:42
  • 1
    @MaximillianLaumeister okay, that makes me feel better. "body-ok" isn't an attribute, I probably didn't describe it well. I believe it's something like a requirement based on the attribute values. So, a link with rel="stylesheet" is considered "body-ok". html.spec.whatwg.org/#body-ok – Chris Hayes Feb 5 at 18:45

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.