Local specificity

In SPOT CSS system is problem of selector specificity reduced only for single element. That's because all selectors for any element are in single block and nothing else is addressing this element (if you follow the SPOT principle). So specificity must be resolved only for a few element selectors, as you can see in example below.

See the example below:

  ...

  +____________________________
  +element('.icon')
    +default
      display: inline-block
      color: #3432A1

    +state(':hover')
      vertical-align: middle
      margin: 0.2em

    +state('.pressed')
      width: 100%
      height: auto
    
    +variant('.primary')
      +default
        font-size: 1.2em
        display: inline-block

      +state(':hover')
        vertical-align: middle
        margin: 0.2em

    +____________________________
    ...

Challenge: What if we need to have +state('.pressed') stronger than +variant('.primary')+state(':hover')? Moving it in the code at the end will not help. Selector .primary:hover will be always stronger than just .primary. For this case we have the following options to help us:

+add-element-specificity
+add-class-specificity
+add-id-specificity
+add-specificity
+override
+override-mutation

The solution of the problem above could be for example:

  ...

  +____________________________
  +element('.icon')
    +default
      display: inline-block
      color: #3432A1

    +state(':hover')
      vertical-align: middle
      margin: 0.2em

    +state('.pressed')
      +override-mutation('.primary:hover')
        width: 100%
        height: auto
    
    +variant('.primary')
      +default
        font-size: 1.2em
        display: inline-block

      +state(':hover')
        vertical-align: middle
        margin: 0.2em

    +____________________________
    ...

---

The mixins and functions used in the code above: element, default, state, override-mutation.