Why overriding Spree default styles is inconsistent?

Question

I am making an SCSS override file for the default Spree template. On the product catalogue display page there is a border around each product image. If I change the border properties for the base state of the product-image class, nothing changes. However if I add an alteration for product-image:hover it works without an issue.

I can resolve the problem using !important but I'd be grateful to understand why the change doesn't go through without that, despite the :hover state changing.

Answer 1

Selectors have different specificity value. It affects overriding priority:

From spec:

A selector's specificity is calculated as follows:

count the number of ID selectors in the selector (= a) count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b) count the number of type selectors and pseudo-elements in the selector (= c) ignore the universal selector Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

Example:

*               /* a=0 b=0 c=0 -> specificity =   0 */
LI              /* a=0 b=0 c=1 -> specificity =   1 */
UL LI           /* a=0 b=0 c=2 -> specificity =   2 */
UL OL+LI        /* a=0 b=0 c=3 -> specificity =   3 */
H1 + *[REL=up]  /* a=0 b=1 c=1 -> specificity =  11 */
UL OL LI.red    /* a=0 b=1 c=3 -> specificity =  13 */
LI.red.level    /* a=0 b=2 c=1 -> specificity =  21 */
#x34y           /* a=1 b=0 c=0 -> specificity = 100 */
#s12:not(FOO)   /* a=1 b=0 c=1 -> specificity = 101 */

You can calculate selector Specificity with this tool