Refactor css in shepherd-theme-arrows theme

[gitjeff05]

The theme shepherd-theme-arrows has a high level of specificity which makes it really difficult to override styles within another project. For example, if one wants to override the header in a shepherd step, they have to compete with this:

.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
    background: #eeeeee;
}

Than means if I want to change the background color, I have to get more specific than that rule above. Then best way might be to add my own class when adding a step:

tour.addStep('guide-step-1', {
    title: "Title for a step",
    text:  "Text for step",
    classes: 'intro-step shepherd-theme-arrows',

and then in my css do this:

intro-step.shepherd-element.shepherd-theme-arrows.shepherd-has-title .shepherd-content header {
    background: #ffffff;
}

There's no reason the initial rule declaration needs to have that high of a specificity. The same affect could be achieved with:

.shepherd-element header {
    background: #eeeeee;
}

[johnbacon]

+1

[geekjuice]

I've felt the same way for a lot of these tether-based projects which have very high specificity. I believe the original intent was so you create themes like we have in the here. However, I'll take a look at flattening these styles since they are unnecessarily specific.

[natepers]

+1

[shaneparsons]

+1

[alec-chernicki]

This was definitely an issue for me too. If no one's taken care of this already I'd be more than happy to tackle it!