A place to cache linked articles (think custom and personal wayback machine)
Du kan inte välja fler än 25 ämnen Ämnen måste starta med en bokstav eller siffra, kan innehålla bindestreck ('-') och vara max 35 tecken långa.

index.md 4.9KB

4 år sedan
12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455
  1. title: Currying in CSS?
  2. url: https://www.trysmudford.com/blog/currying-in-css/
  3. hash_url: 77db8cc6de2906f31a4d37d91a47a3aa
  4. <p>There were lots of interesting discoveries found whilst developing <a href="https://utopia.fyi/">Utopia</a>. This one came when declaring CSS custom properties.</p>
  5. <p>Taking a card as an example, one would often start off with some CSS like this:</p>
  6. <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">.</span><span class="nc">card</span> <span class="p">{</span>
  7. <span class="k">padding</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
  8. <span class="k">background</span><span class="p">:</span> <span class="mh">#FAFAFA</span><span class="p">;</span>
  9. <span class="p">}</span></code></pre></div>
  10. <p>Then extract the values out for re-use across the website:</p>
  11. <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
  12. <span class="nv">--card-padding</span><span class="p">:</span> <span class="mi">40</span><span class="kt">px</span><span class="p">;</span>
  13. <span class="nv">--card-background</span><span class="p">:</span> <span class="mh">#FAFAFA</span><span class="p">;</span>
  14. <span class="p">}</span>
  15. <span class="p">.</span><span class="nc">card</span> <span class="p">{</span>
  16. <span class="k">padding</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">card</span><span class="o">-</span><span class="n">padding</span><span class="p">);</span>
  17. <span class="k">background</span><span class="p">:</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">card</span><span class="o">-</span><span class="n">background</span><span class="p">);</span>
  18. <span class="p">}</span></code></pre></div>
  19. <p>We’ve simply lifted the values out into the <code>:root</code> and replaced them verbatim with their variable counterparts. Nothing contentious to see here.</p>
  20. <p>When working with <a href="https://utopia.fyi/blog/fluid-custom-properties">fluid custom properties</a>, I was desperately trying to refactor the equation to keep it as succinct as possible. It was at this point, I stumbled upon a strange property of custom properties…</p>
  21. <blockquote>
  22. <p>The value after the <code>:</code> in the CSS custom property does not have to be valid CSS.</p>
  23. </blockquote>
  24. <p>It won’t cause any errors, nor invalidate the custom property. It won’t be evaluated in the browser until used, or more specifically, placed in a <code>calc()</code> function.</p>
  25. <h2 id="what-does-this-mean">What does this mean?</h2>
  26. <p>This means we can write concise CSS ‘calculations’ without worrying about wrapping every line in <code>calc()</code>s, and providing its wrapped when we use the property, it will be valid. When you finally run <code>calc()</code>, the browser (appears to) gather all the associated parts of the equation, and run them in one go.</p>
  27. <p>The <code>--f-2</code> declaration below is not ‘valid’ CSS. But when used in the <code>font-size</code> with a <code>calc()</code>, it becomes valid:</p>
  28. <div class="highlight"><pre class="chroma"><code class="language-css" data-lang="css"><span class="p">:</span><span class="nd">root</span> <span class="p">{</span>
  29. <span class="nv">--f-2</span><span class="p">:</span> <span class="p">((</span><span class="mi">2</span> <span class="o">/</span> <span class="mi">16</span> <span class="o">-</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">f</span><span class="o">-</span><span class="n">foot</span><span class="p">))</span> <span class="o">*</span> <span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">f</span><span class="o">-</span><span class="n">hill</span><span class="p">));</span>
  30. <span class="p">}</span>
  31. <span class="nt">body</span> <span class="p">{</span>
  32. <span class="k">font-size</span><span class="p">:</span> <span class="nb">calc</span><span class="p">(</span><span class="nf">var</span><span class="p">(</span><span class="o">--</span><span class="n">f</span><span class="mi">-2</span><span class="p">)</span> <span class="o">*</span> <span class="mi">16</span><span class="p">);</span>
  33. <span class="p">}</span></code></pre></div>
  34. <h2 id="so-what">So what?</h2>
  35. <p>To me, this feels much like the two distinct actions of:</p>
  36. <ol>
  37. <li>Defining a function</li>
  38. <li>Calling that function</li>
  39. </ol>
  40. <p>Which is kind of cool. I don’t know whether there’s more here, but I feel like there probably is.</p>
  41. <p>Some way of currying in CSS, perhaps? I’ve likened currying to <a href="https://www.trysmudford.com/blog/pedalboard/#closures-and-currying">priming ‘code grenades’</a>, then calling them later? Who knows, I’m definitely gonna keep digging to find out.</p>