Geek Answers Handbook

Managing CSS with Aurelia-CLI: Each view loads a different CSS file for enforcement throughout the site, causing conflicts

I have a project with 6 views (HTML). Each of these views has a corresponding view model (.js) and a stylesheet for that view only (.css).

Aurelia-cli does a wonderful job of repeating my file for free and combining all .js and .css files into a couple of files so that they can be referenced, while reducing download time and page size. Therefore, if I have a welcome folder with welcome.html, welcome.js and welcome.css, I can load the CSS for welcome.html with the following <require from="./welcome.css"></require> and CSS will be entered in the <head></head> tags when loading the page.

The problem is that when I go to the next view, the CSS rules from welcome.html / welcome.css are still in the <head> web page, so they still apply. After visiting all 6 submissions in my application, I now have 6 <style> tags in <head> with all the rules of all six pages that apply to every page that I visit, without unloading until the page is refreshed . Needless to say, after visiting a couple of pages the whole site becomes messy garbage.

So my questions

  1. Why is this feature
  2. Am I missing the best practice here?
  3. Is there a way to now load the CSS for the page when I visit, unload it when I delete it, and load new CSS pages in this place?

If I had a 10-page app with a global stylesheet, bootstrap, CSS animations, and an awesome font, at the end of the day I had 14 conflicting styles that are constantly being implemented in the html into which the rest of the application is embedded.

Any suggestions?

+6
source share
1 answer

After you came across similar situations, experimenting for hours, I came to a simple conclusion: I don't like this "injecting CSS files everywhere." Let me tell you a little about this, please. :)

What is the use of this?

  • We have already created a unified global stylesheet with the usual things (bootstrap, font-awesome, etc.). Presumably this is at the head of index.html . Of course, because we would like to have a good screensaver before downloading the application. Even in the official app, skeleton navigation
  • Another reason to avoid <require> is its asynchronous nature, which gives us little (or not) control over loading CSS graphics . It is ideal for JS modules / custom elements, but not for multiple CSS files.
  • And finally, there are those other <require> tags placed in each view, just to make our “simple” situation even more “simple”.

So, wouldn't it be easier to pack the rest of the application stylesheets into this already existing global stylesheet in explicit order?

My suggestion

Aurelia-cli has an excellent feature called generators . You can expand your functionality as you wish. With this in mind, you can create new tasks for CSS preprocessing and embed them in the build process.

  • You have full control over the process.
  • 1 miniature file will be created. It will contain everything in the expected CSS loading order.
  • Small application CSS file size, like ~ 10-30 KB, right? This will not hurt. :)

I created a small project a couple of days ago that also addresses this issue: aurelia-custom-skeleton . Working demo here .

  • During the build process, it creates base.css from global fingerprints and app.css from custom CSS files. This is for debugging purposes.
  • These two files are combined in styles.min.css , which is deployed and referenced by index.html .
  • If you need to create a truly self-executing application, without external files, you still have the option to embed this 1 combined style sheet.
+2
source

More articles:


All Articles