Keep CSS rules static

[flo-dup]

Describe the current behavior

Currently, following #78, CSS is modified dynamically, when user is zooming in / out for performance reasons. This showed great performance improvement but it appears to be problematic:

• it injects CSS rules in the middle of the page, which lead to a bleeding problem: css in svg style bleed into the global css  #149 (see the example in the demo Twolevelofdetail #148).
• it introduced the concept of CSS_RULE, which the user has to define in the constructor, which intersects the CSS rules concept.
• it broke the usual CSS rules definition, which usually solely focusing on styling (and not on behavior)
• it seems to bring maintainability issues? several fixes were already needed on this topic (NAD: clone dynamic css rules to fix missing unapplied rules in some cases #147, Don't update dynamiccssrules on panning, add chromium percentage missing redraw workaround #140)

Describe the expected behavior

The CSS remains static, when user is zooming in / out, a zoom level class is added depending on thresholds given by the user as input. The class could be named based on the min/max threshold (e.g. zoom-level-300-500), or on the interval index (e.g. zoom-level-2).

Describe the motivation

Maintainability, fixing the #149 issue

Extra Information

No response