JSFiddle - React, Tailwind, and code Playground

by Richard Hunter

HTML

<h1>CSS Global scope might not be what you think it is</h1>
https://www.youtube.com/watch?v=_81Lx8f0s2k
<p>

  In his article on CSS scope, Chris Coyier gives the following example of 'global scope':
</p>
<pre>
html {
  font-family: Roboto, sans-serif;
}

</pre> Then he goes onto say
<quote>you've just set a font on every bit of text on a site</quote>. It is indeed true, that every element in the document will now have a font family of Roboto, sans-serif, but what about this:

<pre>
html {
  border: dashed 3px red;
}

</pre>
<p>
  Every element will now have a dashed red border round it, right? Wrong. The root of the document will have such a border but all others will not.
</p>
<p>
  So what's going on here? font-family: Roboto, sans-serif applies to every element due to the fact that its rule set selector targets the html element, but also because the font-family property in inherited by all of an element's descendants. On the other
  hand, the border property is not inherited and so that declaration only applys to the target element, the html element.
</p>
<p>if we wished to apply a red border to every element, we'd have to do this:

</p>

<pre>
* {
  border: dashed 3px red;
}

</pre> Note the use of the universal selector which targets every element. What we see from this demonstration we see two different types of scope in CSS: 1. Selector scope: the set of elements to which a selector applies 2. property scope: whether or not a
property's value is inherited or not. (This terminology is mine) Coye Global selector scope is when the selector targets every element. Global property scope is when an inherited property is set on the root element.


<quote>
  In computer programming, a scope is the context within a computer program in which an identifier is in effect, and can be resolved to an entity – when the entity is visible.</quote>
<pre>
var background = "green";

function foo() {
    background = "red";
    
    function bar() {
      background = 'blue';
  ...

CSS

div {
  margin: 10px 0;
}

quote {
  display: block;
  margin: 10px;
}

pre {
  padding: 10px;
}