Blog

  • Flow Of CSS And How Its Work

    Posted by Pankaj Kumar | Last Updated: 29-Jun-18

    CSS specifies an urgency scheme to determine which style rules apply if more than one rule contests against a certain element. In this so-called cascade, significances or weights are calculated and allocated to rules, so that the results are liable. From my casual office survey, the general consent is that the most essential thing in CSS is that everything ‘cascades’ properly. That is, that rules and styles defined extra down in a CSS article override styles specified further up in the text (without the ! important operator of course, which you would not be using anyhow). It makes intelligence if you think about it, after all, it ’s not named a Cascading Style Sheet for anything. Now, the test. What would be the result of given situation?

     

    HTML

    
     

    Hey World.

    This is another line of text

     

    CSS

     

    
    #my-id {
       color: red;
    }
     
    .my-class {
       color: blue;
    }
     
    h1 {
       color: green;
    }
    
    
    

     

    The Answer:

    Hey, World is red, the second line of text is blue. Don’t trust me? Try it on your own then you will believe me...

    After some google research and analysis blogs, I understand now how styles are calculated and applied but seems to go entirely against the ‘cascading’ flora of style sheets since the cascading flora of style sheets only applies when the ‘specificity’ standards are identical. For example, the following snippet behaves as you would expect:

     

    CSS

     

    
    p {
       color: gray;
       font-size: 20px;
    }
     
    /* ... later ... */
     
    p {
       color: green;
    }
    
    

     

    As you might suppose the paragraph will be green and have a font size of 20px. The rule that is more detailed selectors takes priority over rules that are less specific heedlessly of where that rule is declared in the markup. You can psychologically calculate how specific a rule by the ‘level’ and number of the selectors used. From low to high, you have Element and pseudo elements such as p, a span, div, first-line Class, attributes, pseudo-classes .my-class Id attributes #myelement #theonething From inline style attributes !important If there’s whatever of a higher level, the higher level dominates the lesser level style, and if they’re the same level, the advanced count wins, and if they’re at the same level with the same count (.my-class, and .my-other-class) then the one additional down takes preference, this is the “only” time cascading really occurs.

     

    Its somewhat that is tactlessly very delicate sense of the way we write CSS, you're skilled from the begin to start with the most basic general styles and work your way finished the more exact styles. While this is correct, it’s very easy to go for a long time minus running into a condition where more detailed styles.

     

    I had no impression up until around a week ago that CSS drove like this. I always assumed that specificity was only used to select the subgroup of elements the rule applied to, and that if you applied a more universal rule after a more specific rule that the more universal rule would overwrite anything earlier. This is clearly not the situation.

Tags: css