I recently went down a similar path to build the FE of an app. It worked fine at first and I learned a whole lot about recent updates to CSS. And boy, has it come a long way. Cascade layers, nesting, and the :has selector tripple-handedly change how views can be written for the better.
It is a solid solution for blogs and apps with a distinct document feel, but for anything beyond that I found it too limiting and brittle. Back to components and Tailwind.
lawn · 8m ago
I've never heard anyone complain that CSS is too limiting. If anything it's the opposite.
zwnow · 48m ago
If u like tailwind u might like DaisyUI (daisyui.com)
Tailwind can quickly escalate into very very long class name chains, daisyui cuts that down by a ton. Yea its yet another dependency but definitely worth a look. Phoenix adopted it as default too.
Iv · 1h ago
Well, HTML was supposed to be a generic language to describe typical documents. Most websites don't need more than the default elements.
From an outside perspective, it is perplexing to see the constant back and forth webdevs do between making website more complex and rediscovering the simpler first principles
zwnow · 45m ago
I am sorry but its not the devs who want complexity. Users and Designers want a snappy interactive UI with lots of animations to get the "vibe" right. Devs are usually fine with websites looking like they are straight out of 2003 (considering all the language doc pages I've seen)
habibur · 1h ago
Right click -> view source.
Found "<span class=..." — What?
Read the page.
Footer : "I only got 99% of the way there. I use 11ty’s syntax highlighting plugin, which uses classes for styling."
progbits · 12m ago
I think that's fair. It's not semantic information (I mean in a way I guess it is, but you wouldn't want a screen reader to present it as such), so classes are fine there.
the_other · 55m ago
I like it. Nice effort. Plus I like the visual style a lot too.
I feel there's a mismatch between creating novel "semantic" elements, and then customising them in the markup, rather than the contextual approach (nesting, rich selectors). The mismatch is that the new elements still apply a "what" approach, but the attributes used for customisation apply a "how" approach and leave it in the mark-up. It's still like `<p class="red" />` rather than `main p { background-color: red; }`.
I get that there's a trade-off between purity and code that's nice to work with, and I think you've hit a very readable, appealing and creative balance.
dayvster · 1h ago
Hah that's a cool and creative exercise.
Love the writing style as well
thiago_fm · 1h ago
I love the design of his blog -- the use of dots, link highlights etc.
It also brings back memory of 2000s internet, but merged into Today's design standards. I assume this was intentional.
admissionsguy · 39m ago
I can only see ~half of each line on my phone and cannot scroll, so whatever they are doing, they are doing it badly.
paganel · 20m ago
Also, can't seem to be able to select text, for one reason or another.
iLoveOncall · 1h ago
> I removed a non-trivial amount of CSS (now about ~5KB of CSS over the wire for the entire site)
That's around 2% of the size of the single page of that article, it absolutely is a trivial amount, especially when it complexifies so much the maintenance or addition of the website.
Gabrys1 · 1h ago
The 5KB is trivial. They don't mention how much was actually removed. Maybe 200KB? Who knows
drcongo · 1h ago
It has also vastly simplified the maintenance of the website.
It is a solid solution for blogs and apps with a distinct document feel, but for anything beyond that I found it too limiting and brittle. Back to components and Tailwind.
Tailwind can quickly escalate into very very long class name chains, daisyui cuts that down by a ton. Yea its yet another dependency but definitely worth a look. Phoenix adopted it as default too.
From an outside perspective, it is perplexing to see the constant back and forth webdevs do between making website more complex and rediscovering the simpler first principles
Found "<span class=..." — What?
Read the page.
Footer : "I only got 99% of the way there. I use 11ty’s syntax highlighting plugin, which uses classes for styling."
I feel there's a mismatch between creating novel "semantic" elements, and then customising them in the markup, rather than the contextual approach (nesting, rich selectors). The mismatch is that the new elements still apply a "what" approach, but the attributes used for customisation apply a "how" approach and leave it in the mark-up. It's still like `<p class="red" />` rather than `main p { background-color: red; }`.
I get that there's a trade-off between purity and code that's nice to work with, and I think you've hit a very readable, appealing and creative balance.
It also brings back memory of 2000s internet, but merged into Today's design standards. I assume this was intentional.
That's around 2% of the size of the single page of that article, it absolutely is a trivial amount, especially when it complexifies so much the maintenance or addition of the website.