Skip to main content

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.