Style Kits and theme Customizer Styles. How do they interact?

The interaction between customizer/theme options and Style Kits is an area that sometimes raises questions. Here are things that will clarify how things work in terms of styling inheritance.

1. Style Kits will override the Customizer styles

Let's take the Typography for example. In the customizer, you define the Heading 2 size to be 25px.

In Style Kits, you define H2 size as 35px. 

Then your Heading 2 size will be 35px.

2. A blank Style Kit will inherit the Customizer styles

You do not have to use all the properties of Style Kits. For example you may use STyle Kits for controlling only the spacing via Column Gaps and Outer Section Padding.

In this case, if the Typography settings in Style Kits are blank, and in the customizer, you have defined the Heading 2 size to be  25px, then your actual Heading 2 size will be 25px.

3. Custom CSS will override Style Kits

Now, if you have added custom css in your customizer, under the additional CSS tab, this will override the Style Kits value. So if you add

h2 {font-size: 45px;}

in the Customizer, and you have a 35px value in Style Kits, then the actual Heading size will be 45px.