-
MIR A Petit Pélican
even more embarrassed that there is no list item (<ul> <li>) and therefore a little bit of ux for assistive technology users.
#a11y
-
Nicolas Hoizey
Indeed!
-
Anthony Ricaud
What’s the exact issue you’re pointing out?
-
patrick h. lauke
same as with bootstrap, i strongly suspect it's down to devs demanding a bloody CSS utility class for every single little CSS property. without fail, as soon as you add one, they bleat "why can't we have one for pointer-events:none" or some shit like that...
-
Nicolas Hoizey
Sorry, I though "logorrhea" was strong enough. 😅
I know repetition is not a real problem with compression, but I guess parsing the uncompressed result is not so nice for low power devices.
I really fear this is mostly meant for DX and will lead to issues in the future.
-
Nicolas Hoizey
-
Nicolas Hoizey
Exactly.
-
Steve Workman
Also, anchor tag with # as the href should be a button
Many, many things that aren't optimal
-
Boris
@nhoizey why not (honest question)?
-
Anthony Ricaud
I’ve never seen that argument anywhere. Honestly, I’ve enjoyed working with TailwindCSS and found it good for performance and UI consistency.
-
Nicolas Hoizey
I agree it helps a lot for consistency, like Bootstrap and other frameworks.
But if leads to bad code (see https://t.co/qiXqK2xNFE for example), it’s a shame.
I know you know HTML/CSS enough to not fall in this trap, but I guess many Tailwind users unfortunately don’t.
-
Anthony Ricaud
Thinking about this some more, as far as I know, browsers have to parse CSS on every page so the utility approach should be less to parse.
-
Anthony Ricaud
I don’t think any CSS framework ever helped writing appropriate HTML.
-
Nicolas Hoizey
Less CSS code, but probably more selectors to match, and more rules to combine.
-
Anthony Ricaud
I also had a knee-jerk reaction the first time I saw Tailwind but I’d say give it 5 minutes (
signalvnoise.com/posts/3124-giv…).
Think about the first time you saw something like `<h2 class=“h1”>`. That felt wrong but I think it’s recognised as a good idea nowadays.
-
Boris
I look forward to seeing the proof of this statement and the measurement of the impact on performance. From experience, I would say: close to zero.
-
Nicolas Hoizey
Probably close to zero indeed, closeness depending on device type.
I guess people already made some benchmark, I’ll try to find some.
-
Boris
And even if this were the case, there is no indication that fully custom CSS contain less useless code. Still from experience: there are a lot of useless CSS statements everywhere, and it has almost no impact on performance.
-
Anthony Ricaud
In my experience, unless you have an outrageously big HTML or CSS file (as in several MB), you can avoid thinking about the performance aspect of the parsing/matching.
-
Nicolas Hoizey
Nice post, thanks for sharing.
BTW, I don’t like `<h2 class="h1">`…
-
Boris
There are edge cases where this is relevant, but in most of the web we know of, the cost of HTML and CSS parsing is far outweighed by the cost of blocking JavaScript.
-
Nicolas Hoizey
If I don’t find any benchmark out there, I might build one and try on my low end devices.
-
Anthony Ricaud
There is a very subjective aesthetic aspect to h1.h2 and Tailwind. And it’s OK to not like them based on your tastes. But I’d be careful when arguing that something is bad when you just don’t like it. You know, like tasting food :)
-
Nicolas Hoizey
I agree.
I don’t (currently) like Tailwind, and maybe more how some use it, but I know it helps some others, as I mention in my first note:
nho.link/n/2020/03/02/2/
-
Tim Carry
While the "previous" way of writing HTML markup first and then applying styling in CSS forced us to think about what the various elements were, and not only how they looked
-
Anthony Ricaud
Yes, that's exactly what Tailwind is about. How is that bad?
Have you read
tailwindcss.com/docs/utility-f… and
tailwindcss.com/docs/extractin… understand the philosophy?
-
0gust1
Yes, it shocked me at first (note that the average bootstrap site , after 1-2 year is not better).
Factorizing is possible :
* leveraging the component level (vue, react etc.)
* and/or using the theme() function or the "apply" directive
tailwindcss.com/docs/extractin…
-
0gust1
I tend to agree (but only benchmarks would say)
also look at
dotconferences.com/2019/12/sarah-… (around slide 46)
-
patrick h. lauke
having a class for every possible CSS prop is only one step above just putting inline style="..." attributes in your markup.
anyway, purely from my BS experience, i'd rather provide some high level utilities, but then allow authors to define their own separate styles if needed
-
patrick h. lauke
but i guess it's a matter of taste. "your CSS won't grow" but yes your HTML will. and then devs can still completely mess things up to be completely quirky and non-standard by just littering classes where they shouldn't, losing the power of more high-level classes/components
-
patrick h. lauke
but hey, each to their own...
-
Frank Taillandier
-
MIR A Petit Pélican
Oh no ! the anchors are internal navigation links, they are links <a>
-
Nicolas Goutay
Thanks for the pointer! Yeah I feel you, not leveraging the cascade feels _off_ somehow.
-
Pierre Burel
The problem with the @apply rule provided by Tailwind is that compiled CSS code is duplicated (last time I checked tho). That’s why they recommend using templates first in their doc. That will output “not-DRY” HTML, but I guess it’s better for performance?
-
Nicolas Hoizey
Good to know, thanks! 👍
I guess that's why we often see Tailwind combined with uncss.
-
Nicolas Hoizey
Looks like they already use PurgeCSS after all:
tailwindcss.com/docs/controlli…
-
Romain Pouclet
Ouais je suis d’accord avec ça. Le problème c’est que je suis un vieux con du web aussi mais qui a arrêté d’écrire du CSS en 2014, donc ça fait une sacré pente à remonter depuis « float: left » 😅
-
Nicolas Hoizey
Grid et Flexbox, c'est magique !
Une excellente lecture à ce propos :
every-layout.dev (une partie en accès libre)
-
Romain Pouclet
Tu recommandes ce truc ? J’ai pas encore lu les détails mais si ça me permet de réapprendre en étant « guidé » ça m’intéresse (plus que d’apprendre un framework CSS)
-
Nicolas Hoizey
Oui, c'est super bien écrit, ça explique la logique avant de fournir le code.
Tout le layout de mon template de projet Eleventy est responsive sans aucune Media Query grâce à certaines de ces logiques :
pack11ty.dev/documentation/…
