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

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

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