"raw" style overrides class style forever : expected feature or bug?

[Jclu]

here comes an example stripped from all unnecessary stuff :

        <style>
            .Kgreen { background-color:green;  display:block; }
        </style>

        <h1 id="pp" >Hello World!</h1>
            <button onclick="setStyRed()">chg P5 red via js'style</button>
            <button onclick="setStyBlu()">chg P5 blue via js'style</button>
            <button onclick="setClaGre()">chg P5 green via className</button>
            <script>
                setStyRed=function() { pp.style.backgroundColor ="red" ; }
                setStyBlu=function() { pp.style.backgroundColor ="blue"; }
                setClaGre=function() { pp.classList.toggle("Kgreen") ;   }
            </script>

setting background-color to green via setClaGre works great...
but once the backgroundColor is set via style, it seems to be impossible to change it again via classes
    (kinda precedence of the forme on the latter?) ...
tried this on good ol'presto based Opera, and rev*cent FFox and Chrome.
Am i doing smthing wrong or is that to be accepted?

any pointer really appreciated, thank you

JClu
201805314

[Ingolme]

The style attribute always takes precedence over a stylesheet definition. If you want to reset it then use Javascript to set the style to an empty string. 

You should either do everything with classes or everything with the style attribute, don't mix them. The class option is better since the stylesheet gets to decide how to display each element. 

[Jclu]

thks for the quick reply.

1. understood about SS>Classes though i'd like a ref. stating so confirming the fact CSS are to be implemented by all browsers that way.
2. and i cannot agree more on the flexibility of classes as they allow "context changes" to have more predictable behaveour of the elts.

thks again
JClu
201806026

Edited June 2, 2018 by Jclu

[Ingolme]

Here's an article by Mozilla explaining the logic that all browsers use to calculate CSS priority:  https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity

Here's the actual official standard by the W3C, it basically says what Mozilla's article says but in more technical terms:

https://www.w3.org/TR/selectors/#specificity

https://www.w3.org/TR/css-style-attr/#interpret

[Jclu]

Thank you a lot,

  these articles made it perfectly clear how the precedence (based on specificity and
    some exceptions like "direct styling" targeted here). I find it sad, though,that a
    (page) global option wouldn't exist to override that specific exception (at least)
    without causing the debugging trouble met by "!important".
  bah! i am a mere user that now knows one more thing to be aware of in order to avoid problems :
    1. like you said earlier : no mixing styling methods that "collide"
    2. beware of existing badly written libs that might circumvent that 1st rule
    3. a difficult one at times : specify semantically (classes) as much as possible
        to save time in later evolutions.

now let's enjoy some rainy day 🙂
un grand merci

jclu
201806041

Edited June 4, 2018 by Jclu