From time to time we experience regressions in child themes when we make changes to css selectors and/or markup. The issue is usually that css selectors in child themes suddenly don't apply anymore because we increased specificity of our selector (e.g. we added a class). But also the opposite can happen where a css selector in a child theme starts applying to more elements than intended.

Most of these css rules in child themes could easily be replaced with css variables. That would guarantee that the same rule is applied, as the child theme wouldn't need to specify a new rule to make changes, they can just provide the desired value of the variable.

This would make the child themes more reliable and make it faster to add new customizations. For us it would make it visible in the code which parts are changed in a child theme, currently we can't really know unless we check all child themes.

In a lot of cases this should be easy to implement both for us and the child themes. First we identify which variables are commonly used by child themes (e.g. navbar link color/bg color), then we replace the value with a `var()` statement that defaults to that value. Once that's done child themes can replace their overriding rule with an assignment to that variable.

So in our scss this

a.nav-link {
  color: $white;

  &:hover {
    color: $spray;
  }
}

will become

a.nav-link {
  color: var(--nav-link-color, $white);

  &:hover {
    color: var(--nav-link-hover-color, $spray);
  }
}

and then in the child themes this

.top-navigation{
  a {
    color:$grey;
  }
}

can be replaced by

root {
  --nav-link-color: $grey;
  // All others variables would also go in this root element.
}

Task

• Have a look at campaigns themes stylesheets and identify variables that are most commonly used
• Have a look at some of the most customised child themes (Netherlands, Switzerland, Luxemburg) and identify those variables that are most commonly used
• Add a list of the variables in a branch and link it to PLANET-5104