For a bit of background on this, nesting CSS as @44mc44 has tried to do (known as “CSS scoping”) was proposed for the CSS spec, but browsers were slow to support it, and eventually dropped it altogether.
The idea was you could just limit your CSS to a certain selector like follows:
.some-class {
h1 {
font-size: 24px;
color: #ACACAC;
}
p {
font-size: 18px;
}
}
This would mean that h1 and p elements inside an element with the class some-class would have the styles applied, while h1 and p elements that are not contained in that class would not. This would be a safer way to write your CSS to ensure it doesn’t accidentally get applied to unintended elements.
Unfortunately, this doesn’t work in any browser, so you have to write out the rules individually to achieve the same thing:
.some-class h1 {
font-size: 24px;
color: #ACACAC;
}
.some-class p {
font-size: 18px;
}
@Seann is correct in that if we were using a preprocessor such as SASS or SCSS, then scoping would indeed be supported. You would write your rules scoped, and then the preprocessor would take care of converting your rules to the long form. Using a preprocessor helps to make authoring your CSS easier and less verbose. Alas, Magic Mirror does not appear to use a CSS preprocessor, so we’re stuck with writing it out the long way.
