CSS doesn't make much sense anymore
-
Any stack worth using the html is already all for presentation, and now people use things like tailwind to workaround the "rule" that styling should be separated. CSS became a nuisance, and people still complain about centering a div that is easier to do with html but you're frowned if you do
-
@sockpuppet7 Tailwind is glorified inline CSS and I will fight anyone who claims otherwise.
The whole thing is fucking awful and should be burned to the ground. Start over with HTML 6.
-
I’ll offer a controversial opinion. HTML/CSS is probably fine. The problem is different browsers and renderers that have subtle differences that are affected even by OS you’re using.
Standardise on one of them. Get it consistent everywhere. Then the main problem will probably be that most css hackers haven’t sat down with the documentation and read it.
-
@DogsB Browser makers are all: "OK, you change to match what I do already!"
-
@Arantor said in CSS doesn't make much sense anymore:
Tailwind
Is just a bunch of pre-defined CSS classes? And they want want some odd 250 EUR for it? Man, I'm in the wrong business.
-
Chrome is already the de facto in this realm.
They also have standardised on this concept, the standards are now literally designated Living Standards and new shit is added to them regularly. Mostly by Chrome.
-
@cvi said in CSS doesn't make much sense anymore:
@Arantor said in CSS doesn't make much sense anymore:
Tailwind
Is just a bunch of pre-defined CSS classes? And they want want some odd 250 EUR for it? Man, I'm in the wrong business.
No, Tailwind at its core is some pre-defined CSS classes with some magic so that the resulting CSS file only contains the classes you're actually using.
The core is also free - but there's plenty of 'themes' on top of that which are 'things built in Tailwind that are components or full designs that you can implement with'.
-
@Arantor said in CSS doesn't make much sense anymore:
The core is also free
OK, missed the github link the first time around. The obvious "get plz" link took me to a page with pricing.
@Arantor said in CSS doesn't make much sense anymore:
some magic so that the resulting CSS file only contains the classes you're actually using.
I guess if you update the classes at runtime, this gets a bit a bit tricky, so OK.
-
@Arantor said in CSS doesn't make much sense anymore:
The whole thing is fucking awful and should be burned to the ground. Start over with HTML 6.
some UI kits like zebra and canvas UI doing a huge part from the ground are a thing, and there is wasm
I don't think any UI is going where I want, but one can hope something good will stick, eventually. probably not in my lifetime
-
@cvi said in CSS doesn't make much sense anymore:
@Arantor said in CSS doesn't make much sense anymore:
The core is also free
OK, missed the github link the first time around. The obvious "get plz" link took me to a page with pricing.
@Arantor said in CSS doesn't make much sense anymore:
some magic so that the resulting CSS file only contains the classes you're actually using.
I guess if you update the classes at runtime, this gets a bit a bit tricky, so OK.
The theory says that your templates should list every class you’re using, even if you’re doing something conditional (so you should list both sides of the condition in full) and it will work out which classes when you do your npm run dev (or run build, or whatever incantation you’re using to minify and transpile all the shit)
It’s an answer but I’m firmly not convinced it’s the right answer - it still reads to me like inline styling that pretends it’s not.
-
@sockpuppet7 said in CSS doesn't make much sense anymore:
@Arantor said in CSS doesn't make much sense anymore:
The whole thing is fucking awful and should be burned to the ground. Start over with HTML 6.
some UI kits like zebra and canvas UI doing a huge part from the ground are a thing, and there is wasm
I don't think any UI is going where I want, but one can hope something good will stick, eventually. probably not in my lifetime
Wasm + a canvas is rapidly becoming the new battleground, great for flexibility, fuck you if you want accessibility.
(As an exercise, try Google Sheets in accessibility mode sometime. The whole thing is a canvas with divs on top because that was faster + easier than using regular divs. Accessibility mode ditches the canvas because they’re in no way accessible, and the UI quickly becomes a very different beast.)
We should never have built apps on top of a document model.
-
@Arantor accessibility wasn't a thing I heard anyone worrying when it all started, it would need to be built from the ground too
doesn't approve
-
@DogsB said in CSS doesn't make much sense anymore:
I’ll offer a controversial opinion. HTML/CSS is probably fine
My
marginal amount of respect for your opinion is collapsing
-
@sockpuppet7 said in CSS doesn't make much sense anymore:
accessibility wasn't a thing I heard anyone worrying when it all started
That depends on what "it" refers to. If "it" is the Web as a whole, this isn't entirely true, although back in those days it was more about accessibility for people with browser disabilities than physical disabilities. Back when I first started creating my personal website, circa 1995, Lynx was still a commonly used browser, some graphical browsers could not display images inline (only if you clicked a link to display the image as its own page), and
<table>was only supported by this newfangled thing called Netscape. One of the first things I read about HTML was how it was important to create pages that would degrade gracefully and be usable, if not pretty, regardless of the browser a visitor was using. I took those principles to heart in my personal web pages, and I wish today's designers had the experience of writing for Lynx, Mosaic, Netscape 2 and IE 2.Filed under: My
is bigger than yours
-
@HardwareGeek said in CSS doesn't make much sense anymore:
create pages that would degrade gracefully and be usable,
I'm actually genuinely curious how a
<table>-based page could degrade usably.
-
@Tsaukpaetra I don't remember; it's been years since I touched any of that, but I think maybe each
<td>had a<p>inside it. So even if the browser didn't understand<table>and family, it would understand<p>and format the text somewhat sensibly.
-
@HardwareGeek That's actually the fun fact: if you wrote a page that was even vaguely sensible markup, you'd get a sensible outcome on all the browsers and it would be accssible in the modern sense (within some tolerances for navigation) because you wouldn't have all this shit around it that's a problem.
I'm old enough to remember Lynx (and its descendants in the form of elinks) and I first cut my teeth on one of the early IEs (maybe 3?) so I definitely sympathise.
But I'm usually in the realm of writing developer UI, as it's apparently called (but is super fucking fast, degrades perfectly for any browser and just fucking works).
https://thebestmotherfucking.website/ continues to be inspirational.
-
@Tsaukpaetra said in CSS doesn't make much sense anymore:
@HardwareGeek said in CSS doesn't make much sense anymore:
create pages that would degrade gracefully and be usable,
I'm actually genuinely curious how a
<table>-based page could degrade usably.Consider the humble speech reader.
-
@Arantor said in CSS doesn't make much sense anymore:
@Tsaukpaetra said in CSS doesn't make much sense anymore:
@HardwareGeek said in CSS doesn't make much sense anymore:
create pages that would degrade gracefully and be usable,
I'm actually genuinely curious how a
<table>-based page could degrade usably.Consider the humble speech reader.
Table, main table header, header column, column text eye dee, header column, column text, email address, data row, selected, data column, one, data column, fuck you pay me at-sign read the wall period cum end of table.....
-
"anymore"
-
@Tsaukpaetra said in CSS doesn't make much sense anymore:
period cum end of table
Waiter! I'd like to sit at a different table, please.
-
@Applied-Mediocrity said in CSS doesn't make much sense anymore:
@DogsB said in CSS doesn't make much sense anymore:
I’ll offer a controversial opinion. HTML/CSS is probably fineMy
marginal amount of respect for your opinion is collapsingI said controversial. Not well reasoned.
-
@Arantor said in CSS doesn't make much sense anymore:
Chrome is already the de facto in this realm.
They also have standardised on this concept, the standards are now literally designated Living Standards and new shit is added to them regularly. Mostly by Chrome.
I actually met a happy FE dev once. She convinced IT to install chrome on user’s machines and keep it updated. It was then mandated that the site could only be used in chrome.
I now wonder how she’ll react to having to develop against ios safari.
-
@DogsB she’ll react poorly. She’ll probably Vue poorly too/instead.
-
@HardwareGeek said in CSS doesn't make much sense anymore:
Filed under: My
is bigger than yours<BLINK>ing
-
@DogsB said in CSS doesn't make much sense anymore:
@Applied-Mediocrity said in CSS doesn't make much sense anymore:
@DogsB said in CSS doesn't make much sense anymore:
I’ll offer a controversial opinion. HTML/CSS is probably fineMy
marginal amount of respect for your opinion is collapsingI said controversial. Not well reasoned.
Carry on, my wayward son
-
@Arantor said in CSS doesn't make much sense anymore:
They also have standardised on this concept, the standards are now literally designated Living Standards and new shit is added to them regularly. Mostly by Chrome.
And then people complain that Safari doesn't support the newest bullshit that the Chrome team has farted out last Friday afternoon.
-
@topspin I for one appreciate Safari and Firefox being something akin to a bastion of sanity.
-
@Arantor said in CSS doesn't make much sense anymore:
Tailwind is glorified inline CSS and I will fight anyone who claims otherwise.
I'm way out of my league here, because I do zero web development. But when has this ever stopped anyone from giving their uninformed opinion, so here goes...
The examples on their site do look pretty sleek. But then in the code examples it looks like every single has all the formatting directly inlined in, repeated a million times. I guess there's fancy pre-defined classed for them, but they look very much like
static const int FORTY_TWO = 42;.
There's some example where you can switch designs between "simple", "playful", "elegant", and "brutalist". All of them look well made and you get a beautiful transition to look at. But then the whole fucking code changes! Shouldn't there be some kind of DRY there and you only change, like, the design at a single place?“Best practices” don’t actually work.
I’ve written a few thousand words on why traditional “semantic class names” are the reason CSS is hard to maintain, but the truth is you’re never going to believe me until you actually try it. If you can suppress the urge to retch long enough to give it a chance, I really think you’ll wonder how you ever worked with CSS any other way.
Um, ok. So if semantic classes don't work, what was the point of all of this again? Sounds like
was right the whole time we might as well just use tables everywhere if it works.Well, anyway, don't mind me since I don't know what I'm talking about.
-
@topspin this is exactly my point. They’re burying presentational information in the code rather than semantic meaning.
From the sample on their website:
<img class="w-24 h-24 rounded-full mx-auto" …Image gets to be 24 units (6rem) wide and high, rounded borders, horizontal margin set to auto.
Tailwind advocates tell me it’s not inline styling. But I don’t see how this is better thank
<img style="width: 6rem; height: 6rem; border-radius: 50%; margin-left: auto; margin-right: auto" …Their code is smaller, sure (disclaimer: not sure about that once you consider gzip effects, and the weight of sending the style sheet once you build it)
But maintainability - the very “best practice” of DRY being applied is utterly negated. Bootstrap straddles the line with some elements being semantic (think modals or alerts or whatever) and some stylistic (when you just drop to, say, d-flex as a utility class) but it at least tries.
Yes, there is some capacity to make it consistent across the board because you could change which tone of red is your shade of red and then change automagically that all the gradients of red (like red-400 or red-600) adhere to it. But if you go from red to green in a rebrand exercise (which absolutely does happen), you’re fucked.
The Tailwind creator says he’s tried “best practice” with semantic stuff and in his view “semantic class names are the reason CSS is hard to maintain. He makes a very passionate argument going from classical separation of concerns thinking step by step to reinventing inline styling, throwing around arguments how things you’ve been taught are straw men.
But he doesn’t address the problem that his way generates. He bemoans that GitLab’s CSS produces 402 unique text colours because one component darkens it by 10% and another by 12% but… that’s what he’s encouraging too. Worse, he’s encouraging it to be inconsistent precisely because it’s not centralised!
Fuck this shit.
-
@DogsB said in CSS doesn't make much sense anymore:
I’ll offer a controversial opinion. HTML/CSS is probably fine. The problem is different browsers and renderers that have subtle differences that are affected even by OS you’re using.
Standardise on one of them. Get it consistent everywhere. Then the main problem will probably be that most css hackers haven’t sat down with the documentation and read it.
IMO web design would be 100x better if designers could just let go of the idea od "Pixel perfect" designs.
The priorities of a website should IMO be, in order:
- Be functional
- Be useful to the user
- be performant on the devices used by the lowest quartile of users
- still manage to just barely work (or better) on the devices used by the lowest percentile of users
- free space
- another free space
- be profitable to the website owner i guess
- free space again
- oh look at this sudden free space
- Look good while doing it
- free spaces for the next million places
- this is position a million and twelve, but i dont' want to fight discourse to make it actually say that
- Look pixel perfect on all devices the designers/project managers test it on
-
@Arantor said in CSS doesn't make much sense anymore:
Tailwind is glorified inline CSS and I will fight anyone who claims otherwise.
Never heard of it...
Tailwind CSS - Rapidly build modern websites without ever leaving your HTML.
Tailwind CSS is a utility-first CSS framework for rapidly building modern websites without ever leaving your HTML.
Hmm...reminds me of bootstrap, from what I see on the front page.
“Best practices” don’t actually work.
LOL, things that remind me of...
-
@boomzilla Bootstrap is 50% classes that name their things semantically - all the modal components have modal in the class name, alerts have alert in the name, etc, and while Bootstrap (the other 50%) does have utility classes for sizes, positioning and a bunch of other stuff, it doesn’t do this for every single fucking thing.
It also doesn’t define classes for colour spreads - you define primary, secondary, etc plus what you want to be consistent (in one place, natch) for “this is information” vs “this is a warning”.
In Tailwind you have none of that best practice.
If you decide that your warning messages are background of red-700 and foreground slate-100 (because it defines these colours and a scale of 100-900 for them), you’re writing bg-red-700 and slate-100 for every single place you use this, unless you bite the bullet and your Sass directly invokes those itself (which, I should add, is discouraged by Tailwind). Now your designer decides you want to go to bg-red-600 for a less vibrant tone? Have fun with find/replace…
-
@topspin said in CSS doesn't make much sense anymore:
So if semantic classes don't work, what was the point of all of this again?
I think it's like the cycle between fat and thin clients.
I have some places where I use semantic classes but they're pretty few, and very specific. It's the specificity that's the problem with that sort of thing, IMO.
It's like everything else that you think you could reuse in this business. The actual use cases that you run into require something slightly different that means that you really can't simply reuse the same thing everywhere so you just throw your hands up and use something like this or you get shit like methods with a dozen optional parameters so everyone can get what they need.
-
@Arantor said in CSS doesn't make much sense anymore:
@boomzilla Bootstrap is 50% classes that name their things semantically - all the modal components have modal in the class name, alerts have alert in the name, etc, and while Bootstrap (the other 50%) does have utility classes for sizes, positioning and a bunch of other stuff, it doesn’t do this for every single fucking thing.
It also doesn’t define classes for colour spreads - you define primary, secondary, etc plus what you want to be consistent (in one place, natch) for “this is information” vs “this is a warning”.
In Tailwind you have none of that best practice.
If you decide that your warning messages are background of red-700 and foreground slate-100 (because it defines these colours and a scale of 100-900 for them), you’re writing bg-red-700 and slate-100 for every single place you use this, unless you bite the bullet and your Sass directly invokes those itself (which, I should add, is discouraged by Tailwind). Now your designer decides you want to go to bg-red-600 for a less vibrant tone? Have fun with find/replace…
Yeah, I had only glanced at it, but now that you mention this I see that there. We faff about with margins and shit like that but have specific colors baked into stuff like
primary,success, etc.
-
@accalia said in CSS doesn't make much sense anymore:
discourse
We haven't been on discourse for years. Go wash out your
mouthmuzzle@Arantor said in CSS doesn't make much sense anymore:
If you decide that your warning messages are background of red-700 and foreground slate-100 (because it defines these colours and a scale of 100-900 for them), you’re writing bg-red-700 and slate-100 for every single place you use this, unless you bite the bullet and your Sass directly invokes those itself (which, I should add, is discouraged by Tailwind). Now your designer decides you want to go to bg-red-600 for a less vibrant tone? Have fun with find/replace…
Nonononono. We do not want ALL red tones changed. Just the ones in warning dialogs.
-
@PleegWat said in CSS doesn't make much sense anymore:
Just the ones in warning dialogs.
And only in the important warning dialogs.
-
@dkf said in CSS doesn't make much sense anymore:
@PleegWat said in CSS doesn't make much sense anymore:
Just the ones in warning dialogs.
And only in the important warning dialogs.
Your semantic classes carry that distinction?
-
@PleegWat said in CSS doesn't make much sense anymore:
@accalia said in CSS doesn't make much sense anymore:
discourse
We haven't been on discourse for years. Go wash out your
mouthmuzzle@Arantor said in CSS doesn't make much sense anymore:
If you decide that your warning messages are background of red-700 and foreground slate-100 (because it defines these colours and a scale of 100-900 for them), you’re writing bg-red-700 and slate-100 for every single place you use this, unless you bite the bullet and your Sass directly invokes those itself (which, I should add, is discouraged by Tailwind). Now your designer decides you want to go to bg-red-600 for a less vibrant tone? Have fun with find/replace…
Nonononono. We do not want ALL red tones changed. Just the ones in warning dialogs.
And that’s the problem. If it were a semantic class with a name like “warning”, you could change it. But you have to check each and every use - because it’s inline in all practical senses - rather than a bulk find/replace.
I don’t find the margins/spacing stuff nearly so egregious because that often is a lot more context sensitive but the vast majority of this shit should not be inline.
-
@PleegWat said in CSS doesn't make much sense anymore:
Your semantic classes carry that distinction?
No. You're supposed to work out what the important ones are yourself.
-
@PleegWat said in CSS doesn't make much sense anymore:
@dkf said in CSS doesn't make much sense anymore:
@PleegWat said in CSS doesn't make much sense anymore:
Just the ones in warning dialogs.
And only in the important warning dialogs.
Your semantic classes carry that distinction?
You could if you wanted to. Bootstrap’s don’t but there’s no reason why you couldn’t define one.
Tailwind doesn’t define anything semantic to start with so if you want to do that, you are on your own.
-
@Arantor Maybe you could add a preprocessing step to compile real semantic classes into Tailwind classes...
-
@dkf said in CSS doesn't make much sense anymore:
@Arantor Maybe you could add a preprocessing step to compile real semantic classes into Tailwind classes...
Doable in Vite, doable even in Tailwind but it’s explicitly the Wrong Best Practice
-
@accalia said in CSS doesn't make much sense anymore:
The priorities of a website should IMO be, in order:
- Be functional
- Be useful
Well, you just lost 99.9% of the net at number 2.
-
@HardwareGeek said in CSS doesn't make much sense anymore:
@accalia said in CSS doesn't make much sense anymore:
The priorities of a website should IMO be, in order:
- Be functional
- Be useful
Well, you just lost 99.9% of the net at number 2.
be honest. we lost 80% of it at number one. :P
-
@topspin said in CSS doesn't make much sense anymore:
There's some example where you can switch designs between "simple", "playful", "elegant", and "brutalist". All of them look well made and you get a beautiful transition to look at.
You mean this?
-
@accalia if that list came from your heart there would be "include a fox image somewhere" in one of those bullets
-
@PleegWat said in CSS doesn't make much sense anymore:
@dkf said in CSS doesn't make much sense anymore:
@PleegWat said in CSS doesn't make much sense anymore:
Just the ones in warning dialogs.
And only in the important warning dialogs.
Your semantic classes carry that distinction?
You just have to look for the ones that aren't marked
!important.
-
@Parody My first tendency would indeed be to ignore the not-important bits.
-
@sockpuppet7 said in CSS doesn't make much sense anymore:
tailwind
did they drop support for the styleHTML attribute when I wasn't looking?
