Good people,
Just a little nano-aha moment I wish to share (probably revealing my ignorance ) …
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