Stylesheet (CSS) reference

Good people,

Just a little nano-aha moment I wish to share (probably revealing my ignorance :wink:) …

I’ve adopted the decomposition practice of using theme.css for true global and general styling only, while I keep separate files for page-specific CSS (e.g., standard-page.css for standard-page.html) and “specialized” styling (e.g. roles.css for defining roles).

If you go beyond theme.css and apply additional stylesheets, these additional CSS-files can be referred to in Native Libraries or in the relevant HTML-template files as

<link rel="stylesheet" href="https://my-styled-app.anvil.app/_/theme/my-style.css">

or

<link rel="stylesheet" href=" _/theme/my-style.css">

Providing the full https-address allows you to refer to the stylesheet from other apps, while the “_/theme”-reference is local (current app only) reference… No aha-moment there.

So why not always use the https-address and retain the flexibility of other apps being able to refer to the stylesheet? This certainly makes sense, but (and this my nano aha-moment – retrospectively obvious), such external reference points to the published version of your app. During development you therefore need to save and publish your app to see any changes you’ve made to the stylesheet in question – even when you work within the app itself.

To streamline the workflow (a little bit), I’ve started to use both the absolute and relative stylesheet references, i.e., in Native Libraries (or an HTML-file):

<link rel="stylesheet" href="https://my-styled-app.anvil.app/_/theme/my-style.css">

<link rel="stylesheet" href=" _/theme/my-style.css">

This allows other apps to apply the stylesheet in question (for the published version of your app), but at the same time allows you to see any style changes immediately when you work on the app (regardless of publication status).

Happy styling.

Rufus

7 Likes

Not familiar with CSS (yet), but does the sequence of the links matter? I.e., is there an order-based precedence among them?

Yep, sequence matters in CSS (hence the name “Cascading” in “Cascading Style Sheets”). This means that the last-read CSS-file will override any properties duplicated in previously-read CSS-files (with the same level of CSS-specificity).

… of course in the example provided above, the link tags point to the same file, so in that case sequence is without any consequence.

Except for the Unpublished version, where the Unpublished rules override the Published ones? That’s why both are present in that order?

Edit: With the above, I believe that only the Unpublished version will see any difference between the two, and that is the intent of including both, in that order.

1 Like

Yes, you are right :+1: