{
  "$type": "site.standard.document",
  "description": "A brief introduction to the casecade in CSS.",
  "path": "/blog/an-introduction-to-the-cascade",
  "publishedAt": "2019-06-16T00:00:00.000Z",
  "site": "at://did:plc:gevyqibw5p2xsonkbsbjm5vy/site.standard.publication/3mnqgth7gxo2f",
  "tags": [
    "code",
    "design"
  ],
  "textContent": "This is just an introduction in a condensed form. Just a minor basic level overview of the cascade.\r\n\r\nThe CSS Cascade Level 4 Spec states(https://www.w3.org/TR/csscascade4/cascading);\r\n\r\n<blockquote cite=\"CSS Cascade Level 4 Spec\"The cascade takes a unordered list of declared values for a given property on a given element, sorts them by their declaration’s precedence, and outputs a single cascaded value.</blockquote\r\n\r\nThere is an order in which selectors are prioritized. Importance, scope, specificity, and order. Let's go over each priority starting with importance. You don't have to take it all in at once. Break down each part until you understand it and then move on to the next section. I have provided code examples along the way.\r\n\r\n Importance\r\n\r\nAn important declaration takes precedence over a normal declaration. Such as when the star selector is used for sitewide styling, take for instance boxsizing: borderbox; and then the same property (in this case below, backgroundcolor) is using it in the case of the body selector. So backgroundcolor: red important; will overrule the backgroundcolor: white;.\r\n\r\ncss\r\n\r\n {\r\n  backgroundcolor: white;\r\n}\r\n\r\nbody {\r\n  backgroundcolor: red important;\r\n}\r\n\r\n\r\n\r\n Transition declarations transitiontimingfunction: steps(6, end); or transition: all .25s easeinout;\r\n\r\n Important user agent declarations\r\n\r\ncss\r\n\r\ninput, textarea, keygen, select, button, meter, progress {\r\n  webkitwritingmode: horizontaltb important;\r\n}\r\n\r\n\r\n\r\n Important user declarations p { textindent: 1em important; }\r\n\r\n Important author declarations p { textindent: 1.5em important; }\r\n\r\n Animation declarations\r\n\r\ncss\r\n@keyframes slideright {\r\n  50% {\r\n    marginleft: 110px;\r\n    opacity: 0.9;\r\n  }\r\n\r\n  to {\r\n    marginleft: 200px;\r\n  }\r\n}\r\n\r\n\r\n Normal author declarations p { textindent: 1.5em; }\r\n\r\n Normal user declarations p { textindent: 1em; }\r\n\r\n Normal user agent declarations keygen, select { borderradius: 5px; }\r\n\r\nRead more about Transition declarations(https://www.w3.org/TR/csscascade4/bibliocsstransitions1) here.\r\nRead more about Animation declarations(https://www.w3.org/TR/csscascade4/bibliocssanimations1) here.\r\n\r\n Scope\r\n\r\nA declaration can be scoped to a subtree so that it only affects its scoping element and that element’s descendants. An example is html to body.\r\n\r\n<blockquote cite=\"CSS Cascading and Inheritance Level 4\"If the scoping elements of two declarations have an ancestor/descendant relationship, then for normal rules the declaration whose scoping element is the descendant wins, and for important rules the declaration whose scoping element is the ancestor wins.</blockquote\r\n\r\nSo in other words, for normal declarations the inner scope's declarations override but for the important rule the outer scope's declarations override. Later wins over earlier.\r\n\r\ncss\r\n\r\nh1 {\r\n  color: red;\r\n}\r\n\r\n/ This one wins /\r\nh1 {\r\n  color: green;\r\n}\r\n\r\n\r\n\r\ncss\r\n\r\n/ This one wins due to specificity /\r\n.title__heading {\r\n  fontsize: 2em;\r\n}\r\n\r\nh1 {\r\n  fontsize: 2.8em;\r\n}\r\n\r\n\r\n\r\n<blockquote cite=\"MDN Web Docs\"One thing you should bear in mind when considering all this cascade theory, and what styles get applied over other styles, is that all this happens at the property level — properties override other properties, but you don't get entire rules overriding other rules. When several CSS rules match the same element, they are all applied to that element. Only after that are any conflicting properties evaluated to see which individual styles will win over others.</blockquote\r\n\r\nA not on rule mixing(https://developer.mozilla.org/enUS/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritanceA_note_on_rule_mixing)\r\n\r\n Specificty\r\n\r\n Inline styles (anything between <style</style tags)\r\n ID selectors\r\n Classes / pseudoselectors\r\n Type selectors (for example, h1) & pseudoelements (::before)\r\n\r\n Order\r\n\r\nThe last declaration in document order wins. The order in which you load your stylesheets actually matters. If you’ve got two stylesheets linked in the head of your HTML document, the second stylesheet will override rules in the first stylesheet. This is why resets and @imports are loaded before anything else in the main stylesheet you are using.\r\n\r\n Summary\r\n\r\nI have seen a lot of folks frustrated that they don't understand CSS. Some of animosity towards learning it, some disdain towards it. Knowing the cascade benefits the developer. The fundamental knowing of the cascade and how the cascade works will benefit you in the long run. I offer you some suggestions.\r\n\r\nThe spec may look daunting and the language may look foreign, but when it comes down to it, it really isn't. If I can get it, from reading the spec then anyone can get it. There are some brilliant folks out there who knows JavaScript like the back of their hand. When it comes to CSS and the cascade, they say that it is a concept they cannot fully grasp.\r\n\r\nI learn best by breaking things down to their core. Piece by piece. Breaking the cascade down to bits and pieces (just think of Atomic Design  Atoms, Molecules, Organisms) and dissecting those until I fully grasp the concept(s).\r\n\r\nIf you have stumbled across this article and have any questions, feel free to use the contact page form and send me a question. I hope this article shed a little bit of light on the cascade for at least one person.",
  "title": "An Introduction to the Cascade"
}