I haven't touched Haskell in quite a while! If you ever feel like sharing any info about your experience working with it for web service dev, I'd be really interested to read it!
i will say that though i am predisposed to appreciate and agree with an article like this, any sort of value proposition around "some users don't want javascript" just doesn't... hit for me. and, mind you: i am a card-carrying arch user and have spent more time messing with browser scripting and web crawling, and am more of a True Believer than most. it's just such a niche user preference that i think it should largely be simply ignored. yes, i would love the world to be better for the "noscript" universe, no, i don't think that any individual "grassroots" effort should stake itself on "no javascript" being any part of its utility. i think there are a million other reasons why CSS should win out that are more compelling than an appeal to what feels, extremely ironically, like a callback to the "but 10% of your users use IE6" days... all in all, yes: this is somewhat of a minor point wrt. to the article (which btw i think is great), but i am just calling the "trend", such as it is / has been, for what (i think) it is.
I do wish we would start to move further towards a sane set of front-end application (logic) technologies (I don't think the current leader, Typescript NextJS is it)
But I do appreciate that CSS is starting to feel a lot more sane these days.
This should make WYSISYG HTML/CSS editors possible again.
Here's a thought. Build a WYSISYG tool like that. HTML/CSS only. Round trip; that is; it reads its own HTML/CSS and works on that, rather than using some separately stored representation.
If you want to use Javascript with this, it has to be inside a manually edited IFRAME or FRAME. If you have Javascript, it's probably for interacting with a server or doing something graphical. Or, more likely, for ads, tracking, and such. Not for layout.
This article has lots of nice stuff in it but ... that first example in the tweet at the top,
cool-thing {
display: flex;
&[shadow] {
box-shadow: 1px 1px #0007;
}
@media (width < 480px) {
flex-direction: column;
}
}
and html like
<cool-thing shadow>wow</cool-thing>
I pasted it into a file and it doesn't work. I honestly didn't expect it to work. I thought you needed more to get a cool-thing element but in any case, it's not encouraging to see the first example fail. Am I missing some context?
-- update --
my bad - I think it was just subtle and I thought it wasn't doing anything. Thanks for all the replies
I know like 10-15 different languages, and CSS is by far the hardest to read and understand. It's easier to understand x86 assembly than CSS. CSS is basically pre-tokenized input that drives a renderer, but they sort of went halfway and didn't really make it real tokens or really human-writable.
I'd say that it should take the place of ASN.1 in the RFCs as an example of "what not to do."
How many of those languages are declarative, or domain specific?
There's no use comparing CSS and assembly. It betrays a shallow understanding of CSS. Points to ponder:
- Assembly is superlatively imperative while CSS is the opposite. The difference can be jarring for some. It's commonly felt in day-to-day frontend work that switching to CSS (declarative) from almost anything else (imperative) -- JavaScript, PHP, etc. -- requires a significant mental shift, though it does get easier with experience.
- Lot of the vocabulary and concepts used in CSS come from outside the computing world, namely design and publishing. It's somehow a rarely shared factoid, but it's a hint at how too far away from Kansas we are to be making fair comparisons.
- A pervasive mistake that coders make (and unfortunately a lot of CSS teaching material out there too) is to approach CSS as a set of explicit, atomic instructions -- a fair coder-y assumption, but a bad mental model that leads to frustration. Understand that these instructions can affect one another; some switch entire layout algorithms[0] in a given scope, changing how other instructions behave (predictably).
Still waiting for "you no longer need CSS". Can we offload it entirely to figma, AI, or the designer? It's such a dumb thing to have to write code for, even lamer than CRUD, at least that does something.
For making UIs, web or not, I always go for HTML+CSS. It can be a bit awkward to interact with native code (e.g. C++), since you'll have to generally do message passing which involves serialisation/deserialisation.
Given that HTML+CSS is really damn powerful as this post makes clear, how do other UI toolkits compare? I've always wanted to do more with Qt, but probably it won't come near HTML+CSS in terms of functionality and flexibility?
I really do appreciate the nesting they've added but looking at it as a whole, CSS is a really strange and in my humble opinion, a terrible language. Perhaps I'm just holding it wrong, but it's just so complicated and messy, it sometimes feels like you're just arranging arcane runes in different ways until you make it sort of work for you. It's both a system for styling text based on inheritance, and a layout system for block and inline elements, nested recursively but without inheritance, only containment. I think it was a mistake to combine styling and layout, and I don't feel like adding more and more capabilities to something fundamentally broken can fix it.
“I believe a lot of the negativity towards CSS stems from not really knowing how to use it. Many developers kind of just skip learning the CSS fundamentals in favor of the more interesting Java- and TypeScript, and then go on to complain about a styling language they don’t understand.”
from the article is talking about people like you, who refuse to learn something properly but have the arrogance to think they know better.
> "I think it was a mistake to combine styling and layout"
Perhaps because we can have different styles of layout, it fits with CSS better than you say. Carefully designed padding, margins and negative space is both a style and layout consideration.
Containers contain styles, but the container's relationship with other containers may tie with presentation such as border thickness, colour, shadows, and let's not forget animation and interaction effects on containers. Maintaining control of these aspects in one place makes good sense to me.
CSSdev has been the bread and butter of my last 10 years of work, and I still have the feeling that CSS as a language is never designed, just expanded.
A series of modules that are bolted on top of existing properties without actually improving on them, simply "well, here's another way of doing the same thing" often in ways contradicting each other (see the way the box model works in "display" vs "flex" layout) or just slightly diverging in ways that make extremely hard to debug them (e.g. how gap works in "flex" vs "grid" layouts[1]).
The awkward point-based cascading system means that once a layout is written it's basically frozen, unless you use some convoluted native or js-based encapsulation systems which once in a while gets leaky and, who knows, your component topbar font-weight mysteriously goes from "thin" to "extrabold" or your mobile menu appears even on your desktop breakpoints.
I read up until the css color picker (which doesn’t work in Safari), clicked view source, and then scrolled… and scrolled… and scrolled… until my eyes glazed over and I tapped the back button to get here. It just looks so messy and hacky, but might just be me.
I disagree, I think most of these opinions I see about CSS are from people that haven't taken the time to learn it and particularly to understand the cascade.
Many years ago I did a very deep dive into the CSS specs as I was researching for a new implementation and it struck me as well designed for its purpose of separating style from the semantics of markup.
The problem with CSS is the C: Cascading. Which is what you are calling "inheritance"
Cascading is a nice feature for documents, that present data in the same way over and over. It not good for anything interactive. A lot of modern styling techniques are all about making CSS _not_ cascade. UI components (which is the majority of modern frontend dev) is basically a pre-requisite to achieve that.
The layout system is a bit of a separate discussion, and it is a mess yes, but mostly for backwards compatibility. If we could live in a world where all layout is default flexbox or grid and never mix inline with non-inline in the same container it would work out just fine. In fact that is _exactly_ how it works in React Native and it doesn't cause problems there. Styling in React Native also doesn't cascade which also makes it a lot easier to manage.
> I think it was a mistake to combine styling and layout (...)
Anyone who ever did any work on UI development knows very well that styling and layout are coupled and interdependent. I mean, think about it. Text string length, text size, text overflowing/breaking/clipping, margins, etc. You change border sizes/padding/spacing and the space left for child content changes as well. How exactly do you uncouple something that's fundamentally coupled?
i think css is one of the most brilliant languages
but you have to separate the specific properties (float) and the semantics of the language
the selector system is incredible, in a way i can’t quite describe why but it feels similar to programming in prolog
inheritance is kind of stupid for most things yes, but `all: initial` is a easy fix / debug
to me the part i love is the debugger (dev tools) and the ability to plop down code where ever and it just works, code organization is just writing good selectors
unfortunately i don’t get to do this professionally so the largest css files i work with are 1000 lines, and usually no shared libs, but i find it extremely fun to work with
is there a book that you'd recommend to a CSS noob so that a hypothetical backend developer could learn modern CSS that allegedly does not suck in a curated and guided, not pick-your-own-adventure via blogpost and tutorials way?
I always knew that there should be a way to have a button to change light and dark mode on my website without javascript. But I couldn’t figure it out (pre llm era) and gave up and just used javascript. Now it’s time to make an update on that. This blog motivated me.
If your intention is to let the user choose between styles the best way would be Alternate Stylesheets: https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/... . Sadly Google can't be bothered to implement "legacy" standards (=standards not invented at Google).
If your intention is to adopt your styles slightly to user preferences then there are media queries.
I learned CSS 20 years ago. My strong opinion is that it should be renamed Crappy Style Sheets, but that would take away from its primary fault, that it's cascading. As we learned in many other things, "inheritance" is not a great idea. Especially for something that gets applied globally, by a team of five people. "I will now adjust this thing over here, which will mess up everything my colleague is doing over there" is not a good feature. Its main feature is to give you complex rules how to overrule a certain rule. As a feature it's a a headache, when that's what you base everything around, it's bad. It gives you complex ways to target things, and over time it became even more complex. If you're a sane person, you've learned to avoid most of these otherwise you'll end up with .foo > .bar:nth-child(2n) ~ .baz . Then you will adjust that and come full circle to my argument, which is that it will break Mark's completely unrelated thing.
At the same time doing the simplest imaginable layout was a headache. I've done it, and it was interesting as in, this is a challenge and I am taking it head on, but it never should've been a challenge. Things have improved exponentially here, but it should've been the idea all along. Not how to cascade rules.
All other criticism, the syntax etc. is nitpicky and not important. As long as it's allowing you to do something useful without much fuss, I am ok with any syntax. But it didn't and it never did. Making a webpage layout should not be a full time job.
> The worst thing about CSS is that a lot of people don't bother learning it
How dare people use CSS without learning in-depth all 20+ specifications! It's an outrage!
When people have problems using a tool, you should look at the tool rather than blaming the people. People aren't going to change. You don't tell people to be more careful using a bandsaw; you install safety features.
I remember the my 'one day'. I was messing around making a podcast app awhile back and thinking it shouldn't be hard to make a floating footer in css that's (1) always at the bottom, (2) always visible, (3) doesn't permanently occlude content and (4) doesn't require any hacks or artifacts eg. putting a same sized buffer in the scrolling content to handle item #3. Turns out it's just not possible. Great system.
69 comments
[ 3.6 ms ] story [ 77.6 ms ] threadExplain float: clear?
Does that have anything to do with display: flow-root?
And white-space is not actually whitespace?
And when does vertical-align work vs not?
---
^ That is all CSS (and not particularly edgy CSS, except for flow-root).
So....yes, CSS is really that hard. Unless you use the subset of CSS that you have decided to learn + use. Not unlike C++.
I do wish we would start to move further towards a sane set of front-end application (logic) technologies (I don't think the current leader, Typescript NextJS is it)
But I do appreciate that CSS is starting to feel a lot more sane these days.
Here's a thought. Build a WYSISYG tool like that. HTML/CSS only. Round trip; that is; it reads its own HTML/CSS and works on that, rather than using some separately stored representation.
If you want to use Javascript with this, it has to be inside a manually edited IFRAME or FRAME. If you have Javascript, it's probably for interacting with a server or doing something graphical. Or, more likely, for ads, tracking, and such. Not for layout.
-- update --
my bad - I think it was just subtle and I thought it wasn't doing anything. Thanks for all the replies
I find vw very useful for a scaling pixel-perfect mobile portrait view that looks identical whether your mobile is 320px or 440px viewport width.
RIP any semblance of using meaningful tags for machine readability I guess.
I know like 10-15 different languages, and CSS is by far the hardest to read and understand. It's easier to understand x86 assembly than CSS. CSS is basically pre-tokenized input that drives a renderer, but they sort of went halfway and didn't really make it real tokens or really human-writable.
I'd say that it should take the place of ASN.1 in the RFCs as an example of "what not to do."
There's no use comparing CSS and assembly. It betrays a shallow understanding of CSS. Points to ponder:
- Assembly is superlatively imperative while CSS is the opposite. The difference can be jarring for some. It's commonly felt in day-to-day frontend work that switching to CSS (declarative) from almost anything else (imperative) -- JavaScript, PHP, etc. -- requires a significant mental shift, though it does get easier with experience.
- Lot of the vocabulary and concepts used in CSS come from outside the computing world, namely design and publishing. It's somehow a rarely shared factoid, but it's a hint at how too far away from Kansas we are to be making fair comparisons.
- A pervasive mistake that coders make (and unfortunately a lot of CSS teaching material out there too) is to approach CSS as a set of explicit, atomic instructions -- a fair coder-y assumption, but a bad mental model that leads to frustration. Understand that these instructions can affect one another; some switch entire layout algorithms[0] in a given scope, changing how other instructions behave (predictably).
[0] https://www.joshwcomeau.com/css/understanding-layout-algorit...
> n-th child variable
See sibiling-index() and sibling-count() https://developer.mozilla.org/en-US/docs/Web/CSS/sibling-ind...
> Reusable blocks
See @function and @mixin draft spec, https://drafts.csswg.org/css-mixins-1/ and https://css-tricks.com/functions-in-css/
Both are available in chrome already.
Given that HTML+CSS is really damn powerful as this post makes clear, how do other UI toolkits compare? I've always wanted to do more with Qt, but probably it won't come near HTML+CSS in terms of functionality and flexibility?
from the article is talking about people like you, who refuse to learn something properly but have the arrogance to think they know better.
Perhaps because we can have different styles of layout, it fits with CSS better than you say. Carefully designed padding, margins and negative space is both a style and layout consideration.
Containers contain styles, but the container's relationship with other containers may tie with presentation such as border thickness, colour, shadows, and let's not forget animation and interaction effects on containers. Maintaining control of these aspects in one place makes good sense to me.
A series of modules that are bolted on top of existing properties without actually improving on them, simply "well, here's another way of doing the same thing" often in ways contradicting each other (see the way the box model works in "display" vs "flex" layout) or just slightly diverging in ways that make extremely hard to debug them (e.g. how gap works in "flex" vs "grid" layouts[1]).
The awkward point-based cascading system means that once a layout is written it's basically frozen, unless you use some convoluted native or js-based encapsulation systems which once in a while gets leaky and, who knows, your component topbar font-weight mysteriously goes from "thin" to "extrabold" or your mobile menu appears even on your desktop breakpoints.
[1] https://developer.mozilla.org/en-US/docs/Web/CSS/gap
Many years ago I did a very deep dive into the CSS specs as I was researching for a new implementation and it struck me as well designed for its purpose of separating style from the semantics of markup.
Cascading is a nice feature for documents, that present data in the same way over and over. It not good for anything interactive. A lot of modern styling techniques are all about making CSS _not_ cascade. UI components (which is the majority of modern frontend dev) is basically a pre-requisite to achieve that.
The layout system is a bit of a separate discussion, and it is a mess yes, but mostly for backwards compatibility. If we could live in a world where all layout is default flexbox or grid and never mix inline with non-inline in the same container it would work out just fine. In fact that is _exactly_ how it works in React Native and it doesn't cause problems there. Styling in React Native also doesn't cascade which also makes it a lot easier to manage.
Anyone who ever did any work on UI development knows very well that styling and layout are coupled and interdependent. I mean, think about it. Text string length, text size, text overflowing/breaking/clipping, margins, etc. You change border sizes/padding/spacing and the space left for child content changes as well. How exactly do you uncouple something that's fundamentally coupled?
but you have to separate the specific properties (float) and the semantics of the language
the selector system is incredible, in a way i can’t quite describe why but it feels similar to programming in prolog
inheritance is kind of stupid for most things yes, but `all: initial` is a easy fix / debug
to me the part i love is the debugger (dev tools) and the ability to plop down code where ever and it just works, code organization is just writing good selectors
unfortunately i don’t get to do this professionally so the largest css files i work with are 1000 lines, and usually no shared libs, but i find it extremely fun to work with
If your intention is to adopt your styles slightly to user preferences then there are media queries.
At the same time doing the simplest imaginable layout was a headache. I've done it, and it was interesting as in, this is a challenge and I am taking it head on, but it never should've been a challenge. Things have improved exponentially here, but it should've been the idea all along. Not how to cascade rules.
All other criticism, the syntax etc. is nitpicky and not important. As long as it's allowing you to do something useful without much fuss, I am ok with any syntax. But it didn't and it never did. Making a webpage layout should not be a full time job.
How dare people use CSS without learning in-depth all 20+ specifications! It's an outrage!
When people have problems using a tool, you should look at the tool rather than blaming the people. People aren't going to change. You don't tell people to be more careful using a bandsaw; you install safety features.