Best practice to access of component style (CSS rules)

Best Practices
1

Hello,

I have a component with a related stylesheet. like the following picture.

Screenshot_1
Screenshot_1.png1057×637 42.6 KB

In typescript class, I want to access any CSS rule and override it based on some conditions on the fly. like

if(something...)
    element('at.price-table .features h4').manipulate('padding',10px);

What is the best practice of accessing CSS rules in JS/ TS? I want to a dynamic way for accessing CSS rule and manipulating them because it is so dirty to copying rules and override them by !important.

Any suggestions?

1 Like
2

The easiest would be to inline your CSS in the html file and use binding. But! If you’re using the component a lot then lots of duplicate CSS will be in your dom.

The not so easy option is to require CSS module as text, enhance it with Aurelia and inject into the document head

1 Like