“Variables” in CSS are harmful (2008)
I think he&#x27;s wrong here: requiring that folks preprocess some CSS-variant-with-constants into CSS-without-constants just multiplies the number of entities (by however many CSS variants are then introduced).  CSS&#x27;s lack of constants is a <i>glaring</i> design error.<p>If we want to reduce the total number of entities, then we should examine unifying HTML, CSS &amp; scripting.  As I&#x27;ve indicated elsewhere, I think that something like this would be awesome:<p><pre><code>    ;; adapted from https:&#x2F;&#x2F;www.w3schools.com&#x2F;howto&#x2F;howto_css_modals.asp
    
    (html
     (head
      (title &quot;modal-box-example&quot;)
      (style
        ;; The Modal (background)
       (.modal
        ;; Hidden by default
        (display none)
        ;; Stay in place
        (position fixed)
        ;; Sit on top
        (z-index 1)
        (left 0)
        (top 0)
        ;; Full width
        (width &quot;100%&quot;)
        ;; Full height
        (height &quot;100%&quot;)
        ;; Enable scroll if needed
        (overflow: auto)
        ;; Fallback color
        (background-color (rgb 0 0 0))
        ;; Black w&#x2F; opacity
        (background-color (rgba 0 0 0 0.4)))
    
       ;; Modal Content&#x2F;Box
       (.modal-content
        (background-color #x&quot;fefefe&quot;)
        ;; 15% from the top and centered
        (margin &quot;15%&quot; auto)
        (padding 20px)
        (border 1px solid #x&quot;888&quot;)
        ;; Could be more or less, depending on screen size
        (width &quot;80%&quot;))
    
       ;; The Close Button
       (.close
        (color #aaa)
        (float right)
        (font-size 28px)
        (font-weight bold))
    
       ((.close:hover .close:focus)
        (color black)
        (text-decoration none)
        (cursor pointer)))
    
      (script
       (with-elements-by-id
        ((modal &quot;myModal&quot;) (btn &quot;myBtn&quot;)) document
        (let ((span (aref (get-elements-by-class-name document &quot;close&quot;) 0)))
          (setf (on-click btn) (lambda () (setf (display (style modal)) &quot;block&quot;))
                (on-click span) (lambda () (setf (display (style modal)) &quot;none&quot;))
                (on-click window) (lambda (event)
                                    (declare (ignorable event))
                                    (setf (display (style modal)) &quot;none&quot;)))))))
     (body
       ;; Trigger&#x2F;Open The Modal
      ((button id &quot;myBtn&quot;) &quot;Open Modal&quot;)
    
      ;; The Modal
      ((div id &quot;myModal&quot; class &quot;modal&quot;)
    
       ;; Modal content
       ((div class &quot;modal-content&quot;)
        ((span class &quot;close&quot;) ×)
        (p &quot;Some text in the Modal..&quot;)))))</code></pre>