How to get style for header & footer components only

I don't see a problem with media queries. The rules are detected by selector and everything works fine. I add class and set style only for mobile and it works.

Yeah, styles are in a different container (editor.CssComposer.getAll()) so it's a bit harder and there is no API for extracting all matching styles.

What I'd suggest doing something like this

const matchedRules = (component, rules) {
    const el = component.getEl();
    let result = [];

    rules.forEach(rule => {
      try {
        if (rule.selectorsToString().split(',').some(
          selector => el.matches(selector)
        )) {
          result.push(rule);
        }
      } catch (err) {}
    });

    component.components().forEach(component => {
      result = result.concat(matchedRules(component, rules))
    })

    return result;
};

const allRules = editor.CssComposer.getAll();
const componentRules = matchedRules(yourComponent, allRules);

// componentRules is now an array of css rules
// To get the code you'd do something like this
let cssCode = '';
componentRules.forEach(rule =>  cssCode += rule.toCSS());

BTW this is not a final solution, definitely, you'd need to handle also rules with media queries, so take it as a starting point

@artf, thanks!