CSS Code Custom Style Priority

[strobley]

Hi Themeco,

Testing Pro 1.2.6

Question: When setting Custom CSS styles what the priority - how does it work?

Playing with Pro, for example, I create a Headline in the Header and set Custom Class my-class, the class is added to <div containing the Headline, not the <span

i.e. <div class="hm5 x-text my-class x-text-headline">

If I change my-class font-size at a breakpoint with Custom CSS

@media (max-width: 768px) {
  .my-class {
    font-size: 1.5em;
    letter-spacing: 0.1em;
  }
}

This doesn’t have any impact, to make work I need to add !important; after every style.

@media (max-width: 768px) {
  .my-class {
    font-size: 1.5em !important;
    letter-spacing: 0.1em !important;
  }
}

However if I target the specific generate span code then it works without !important;

@media (max-width: 768px) {
  .hm5.x-text .x-text-content-text-primary {
    font-size: 1.5em;
    letter-spacing: 0.1em;
  }
}

This is only one example of the many custom changes that can be made with Custom Class. Is this the only way to make it work without using !important; depending on the Element? Depending on the Element do all styles have be re-coded in Custom CSS if Elements are added/removed and therefore the generated code would be different?

[nico]

Hi @strobley,

Thanks for writing in.

To make your CSS work without using !important , you can use the specific class to be use. Just like the specific generate span code that you shared above then add the custom class that you added to the element.

For example,

.hm5.x-text .x-text-content-text-primary .my-class{
    font-size: 1.5em;
    letter-spacing: 0.1em;
}

Let us know how it goes.

Thanks.

[strobley]

Thanks Nico, does this not somewhat defeat the idea of custom classes as styles need to be specifically targeted which can be done without custom class?

If not already in the Docs/KB, suggest adding !important be used to override styles when using custom classes.

[friech]

Hi There,

In general rule CSS would be Inline styling > Embedded styling > External stylesheet and yup !important beats them all.

However, if it is the same type of styling (e.g. both style is Embedded style) then it will go down to CSS Specificity, If two CSS selectors apply to the same element, the one with higher specificity wins. You can use this Specificity Calculator. That means the more specific your selector is the better.

Hope this shed some lights,
Cheers!