CSS best practices in Aurelia v1

1

I’m using Aurelia version 1.

I’m struggling a bit trying to use CSS in components.
I’ve read everything I can find on binding to CSS class and styles,
which is basically just this one short page: Binding: Class and Style | Aurelia
There are no running examples on this page, just some isolated HTML template snippets.
The tutorials didn’t seem to cover this topic.

The CSS I define works as long as I use plain CSS classes, defined in a *.css file.
But I run into trouble when I try to define and use classes or styles at run-time in javascript.

  • What is the recommended way to manage plain CSS in Aurelia?
    Is there a way to associate plain CSS with a component? Or is this only done by requiring an external CSS file from an HTML template file?

  • Is there more documentation describing how to change CSS at run time?
    I understand that I should try to use plain CSS classes whenever possible.
    But in some cases, I want the CSS to change due to run-time conditions, such as scaling font-sizes, or colors conveying status.
    In these cases, I’m defining CSS properties in objects in the component TypeScript file, similarly to what I’ve done in React.
    I’ve come across conflicting advice for how javascript object property names are mapped to CSS properties. Some posts suggested camelCase, other kebab-case. Sometimes numbers, sometimes strings. For example: Binding style object works only on single worded css properties [1.0.9] · Issue #523 · aurelia/binding · GitHub
    What happens if I use both class and class.bind on one element? …and with style?
    Can I use class multiple times on one element? …style?
    In what ways to class and style conflict?

In any case, please advise if you know of more documentation or of some examples.
Thanks

2

And in case it helps, here is a gist of where I tried to get some things to work but had trouble.

https://gist.dumber.app/?gist=9084f70df4f9ee7d110bd4b8b17030f0

3

I think a simpler way to deal with it would be to create a skeleton app using the aurelia-cli and compare. Ideally, I go for component specific css files, i.e. 1 css file per custom element and then use css-modules to that to ensure unique-ness of the class names. Also, it might be easier to just create a global stylesheet for the shared rules. And these are orchestrated using the webpack loaders. I think the idea might look more tangible if you see a skeleton app generated by the aurelia-cli.