4 ms·
I think he's wrong here: requiring that folks preprocess some CSS-variant-with-constants into CSS-without-constants just multiplies the number of entities (by h
by zeveb 9y ago
I think he'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's lack of constants is a glaring design error.
If we want to reduce the total number of entities, then we should examine unifying HTML, CSS & scripting. As I've indicated elsewhere, I think that something like this would be awesome:
;; adapted from https://www.w3schools.com/howto/howto_css_modals.asp
(html
(head
(title "modal-box-example")
(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 "100%")
;; Full height
(height "100%")
;; Enable scroll if needed
(overflow: auto)
;; Fallback color
(background-color (rgb 0 0 0))
;; Black w/ opacity
(background-color (rgba 0 0 0 0.4)))
;; Modal Content/Box
(.modal-content
(background-color #x"fefefe")
;; 15% from the top and centered
(margin "15%" auto)
(padding 20px)
(border 1px solid #x"888")
;; Could be more or less, depending on screen size
(width "80%"))
;; 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 "myModal") (btn "myBtn")) document
(let ((span (aref (get-elements-by-class-name document "close") 0)))
(setf (on-click btn) (lambda () (setf (display (style modal)) "block"))
(on-click span) (lambda () (setf (display (style modal)) "none"))
(on-click window) (lambda (event)
(declare (ignorable event))
(setf (display (style modal)) "none")))))))
(body
;; Trigger/Open The Modal
((button id "myBtn") "Open Modal")
;; The Modal
((div id "myModal" class "modal")
;; Modal content
((div class "modal-content")
((span class "close") ×)
(p "Some text in the Modal..")))))
- ChrisSD 9y agoPardon my ignorance but how is that different from putting <style> and <script> tags inline in HTML? Other than the syntax of course.
- TuringTest 9y agoThe syntax itself may be a big deal. With a unified syntax like the above LISP-like example, you can meta-program all content, structure and style with the same scripts, and manipulate them inside the same generic tools. This could be used to reduce the number of entities in the system, in special those for logic expressions and control flow.
- dkonofalski 9y agoI especially dislike this type of pairing because it makes it an explicit requirement for the content and presentation to be together. I prefer content to be separate from styling, as intended by CSS, simply because we can't predict what the future will bring. Content will always remain content when it's semantic but presentation can and will change as time goes on.
- _yawn 9y agoContent and presentation both change, and together. That's how it's always been for every type of media. How much space you have on the newspaper determines what your article's title is, but what the title is also determines how much space you have.
- dkonofalski 9y agoNo they don't. I can write a paper or a thesis without any worry about how it's going to look visually to the person consuming it. I can post a video of something without any kind of concern for what size, container, or surrounding content might accompany it. Content is content. Presentation is how that content is displayed. While they can work together, the content is the most important thing and presentation should always be secondary to it.
- zeveb 9y agoIt was just an example. One could have ((link rel stylesheet href "http://host/path/foo") http://host/path/foo")) still.
- dkonofalski 9y agoSure. I was just commenting on the fact that I've seen this type of setup everywhere lately and the content and presentation are inextricably linked. To me, that's a major problem.
- atoko 9y agoI shudder at the thought of this syntax being used for anything longer than that example. “)))))))” everywhere. Not sure why you would want your css to not be declarative