I find it a little bit backwards that semantic CSS class names should be invented by the developers. If there's a working and well-organised design system in place, then there should be little need to come up with arbitrary names for things. At the very least the designer(s) should be consulted, because they have experience and insight into which elements have common styling with each other and how they are placed in context. In general, I think Tailwind's popularity has a lot to do with developers typically not being designers.
Several reasons to use "primary" class for buttons – `button` is just one of the elements that gets used with button styling, but there might also be `a`, `div` or `input` tags that look like buttons, depending on the use (or source).
They are (encapsulated in reusable components). But when the project grows big, Tailwind's shortcomings become apparent, the biggest ones being the loss of context (cascading) – and of course the lack of separation of concerns, when the concerned parties are also separate (developers and designers).
When building a design system, there are a bunch of default styles, and then there are variations based on context. To put it in a real world example, imagine a newspaper heading style that varies depending on where the heading appears. Front page headings are bigger, sports pages might use a different style, and so on. Same with buttons, cards, tabs, what have you.
This isn't impossible to build with Tailwind by adding, say, react logic, but it becomes a mess quickly. If you have a well-built design system, class naming shouldn't be that hard to figure out and communicate to developers. But deciding on a coding logic to account for these context changes and sticking to it seems not as easy, especially when developers come and go.
I’ve worked on some large projects including refactors with Tailwind and my view is opposite. I can see how Tailwind would work on small projects, or ones where the designer never touches the styling inside the code. But on the other hand, avoiding naming because it’s hard isn’t how I approach organising design, and it doesn’t sound like a good approach to coding either. But I can see how there may be a need to bypass it in projects where there is no designer, or a design system.
Being a designer who does his work inside code, Tailwind is a nightmare. I hand off my design files, the developers do their thing. But then, maybe I want to tweak things after a review, or the design system changes, so I have to do a sweeping change to those buttons. Now I need to touch dozens of jsx/tsx files around the platform and make humongous pull requests, and the result is often dozens of merge conflicts. If I only touched CSS/SASS files, there might not even always be a need to have the files reviewed.
Another problem is readability. When things aren’t getting named, the files are often unreadable at first glance. And that’s what they are to external services like Pendo, which rely on classes to tie their thing into the UI. Which are now susceptible to change on a very regular basis, because when you change Tailwind styles “that only changes that particular instance”, or so the story goes.
I've seen a sneak peek before and learned that things evolve pretty quickly at this point :) Cannot wait to see where all this goes, congratz on the release!
Well Tero's fiercest opinions typically take the form of code :)
Riot 2.0 was completed and submitted yesterday after lunch (Finland time), blog post was completed today at the same hour. We genuinely felt they were worth telling the world about and people seem to agree.
Yes, embedding is done by inserting a couple of lines of html, and styling to make Muut look like the rest of your site is easy with the included CSS designer tool. You can also write CSS by hand if you wish.
Yeah, yeah, I know: I'm just a graphic designer without a deep knowledge of the technology... But what happens in the diagram is still pretty close to what you describe, to be fair: messages duped and delivered simultaneously. Absolute accuracy would have made for a pretty complex illustration. Point taken anyway, I'll try harder next time!
Btw, did you notice it has blue heads? I thought those were cool.
Arial has its flaws (what font doesn't?), but to call it "a bad copy of Helvetica" is just plain wrong. If Arial is a copy of Helvetica, then Helvetica is a copy of Akzidenz Grotesk, and so on.
Traditional web fonts had their place and might still be a valid choice for some sites, but with higher resolution screens becoming more and more commonplace recommending "web fonts" no longer makes sense. If anything, Verdana and Georgia look clunky on retina screens (like they do in print), whereas classic fonts aimed for print have regained their subtle shapes and look elegant on screen.
Yes, Lucida has a larger x-height and thus looks 'more readable' to a lot of people — but only at the same pt size. I'm so used to Helvetica's word shapes and tight letterspacing, though, that I'll have to disagree on that as well.
Arial has its flaws (what font doesn't?), but to call it "a bad copy of Helvetica" is just plain wrong. If Arial is a copy of Helvetica, then Helvetica is a copy of Akzidenz Grotesk, and so on.
Traditional web fonts had their place and might still be a valid choice for some sites, but with higher resolution screens becoming more and more commonplace solely recommending "web fonts" no longer makes sense. If anything, Verdana and Georgia look clunky on retina screens (like they do in print), whereas classic fonts aimed for print have regained their subtle shapes and now look elegant on screens.
Yes, Lucida has a larger x-height and thus looks 'more readable' to a lot of people — but only at the same pt size. I'm so used to Helvetica's word shapes and tight letterspacing, though, that I'll have to disagree on that as well.