Solving Problems With Selectors

by @heydonworks

“CSS is so badly designed. It should be more modular and specificity is a PITA and it just doesn’t make sense”

Translated by

“I like javascript”

button {

  /* define styles */

}

if (button) {

  // define styles

}

button[disabled] {

  /* define styles */

}

if (button && disabled) {

  // define styles

}

button:not([disabled]) {

  /* define styles */

}

if (button && !disabled) {

  // define styles

}

(function() {
 

  styles = {};

 

  if (button) {

    styles.button = {
      'background-color': 'red'

    }

  }

 

  return styles;


})();

a stylesheet

YOU DON'T NEED TO GET JAVASCRIPT INVOLVED WITH CSS. IT WON'T ADD ANYTHING USEFUL.

div
> div:first-child
> div:first-child::before {

   content: ' '

}

button:empty:not([aria-label]):not([aria-labelledby])::after {

   content: ' '

}

*:not([class*='__']) > *:not([class*='__'])::after {

   content: ' '

}

Dynamic Content

needs

Dynamic Layout

<div class="grid">

    <div class="grid__item two-thirds">
        <!-- content -->
    </div>

    <div class="grid__item one-third">
        <!-- content -->
    </div>

</div>

Grid System Prescription

Evaluating divisibility

:nth-last-child(3n):first-child, 

:nth-last-child(3n):first-child ~ * {

  width: 33.333%;

}

 

:nth-last-child(4n):first-child, 

:nth-last-child(4n):first-child ~ * {

  width: 25%;

}

9 items
(divisible by 3)

:nth-last-child(3n):first-child, 

:nth-last-child(3n):first-child ~ * {

  width: 33.333%;

}

 

:nth-last-child(4n):first-child, 

:nth-last-child(4n):first-child ~ * {

  width: 25%;

}

8 items
(divisible by 4)

:nth-last-child(3n):first-child, 

:nth-last-child(3n):first-child ~ * {

  width: 33.333%;

}

 

:nth-last-child(4n):first-child, 

:nth-last-child(4n):first-child ~ * {

  width: 25%;

}

7 items
(divisible by 1)

Prime Numbers

Upsetting

Then @BinaryScenery showed me this...

Primes and multiples of primes

6n+1 and 6n-1

FFFFFFFFFFF

FFFFFFFFFF

FFFFFFFFF

FFFLEXBOX

×

 flex-flow: row wrap;

 flex-flow: row wrap;

 flex-flow: row wrap;

 flex-flow: row wrap;

 flex-flow: row wrap;

 flex-flow: row wrap;

(controlled)

li:nth-child(3n - 1) {
    min-width: 25%;
}


li:nth-child(5n - 1) {
    min-width: 33.333%;
}


li:nth-child(7n - 1) {
    min-width: 50%;
}


li:nth-child(11n - 1) {
    min-width: 66.666%;
}

MAXIMAL HETEROGENEITY!!!

Quantity thresholds

The @Heydonworks ALA Wildlife Collection

  1. Baby weasel riding a woodpecker
  2. Horse
  3. Bear

A “quantity query”

:nth-last-child(n+8),
:nth-last-child(n+8) ~ * {
  /* styles elements that occur in quantities of eight or more */
}

“that CSS is
ugly”

/* For styling elements in  quantities of 8 or more */

:nth-last-child(n+8),
:nth-last-child(n+8) ~ * {
  max-width: 20%;
}

WRITE COMMENTS OBVS

@include at-least(8) {

  /* properties */

}

...which @pascalduez converted into a postCSS plugin...

:at-least(8) {

  /* properties */

}

...which is kind of like the
javascript...

if (elems.length >= 8) {

  /* properties */

}

Thank You!

@heydonworks

Solving Problems With Selectors

By heydon

Solving Problems With Selectors

  • 11,422