Michelle Barker
Some thoughts about what if you don’t want to use a framework anymore: https://css-irl.info/disentangling-frameworks/

CW: Tailwind CSS. Anyone who mansplains Tailwind to me will be immediately blocked, no joke
CSS { In Real Life } | Disentangling Frameworks

A blog about CSS, front-end development, the web, and beyond.

CSS { In Real Life } | Disentangling Frameworks
Jan 17, 2023 at 12:06pmWeb
Show threadOliverJan 17, 2023
@michelle This is *such* a good take 👏👏👏
Show threadAndy BellJan 17, 2023
@michelle certified banger of an article m8
Show threadRobbJan 17, 2023
@michelle I had the struggle of trying to de-tailwind something recently, so I couldn't agree more with this article
Show threadMichelle BarkerJan 17, 2023
@Robb Ooh interested to hear your reasons for de-tailwinding (if you feel like sharing?). I feel like the past year of CSS has made me re-consider using TW at all. Not sure I would bother if I was starting a new project now, despite a few advantages.
Show threadRobbJan 17, 2023
@michelle A client inherited a TW-based microsite built by a third-party, and nobody in-house had ever used TW before. They didn't intend on adopting TW elsewhere, so didn't want to spend resources on learning TW. At the same time, they didn't want to rely on contractors for every update either so they decided it'd be simpler to do a one-shot rewrite in the style of their other projects
Show threadMichelle BarkerJan 17, 2023
@Robb Makes sense! We adopted it at the agency I worked at previously in part to try and increase consistency with the way CSS was written across projects. It definitely had some value there, but not so much on the projects I work on now
Show threadSandrineJan 18, 2023

@Robb @michelle That's a red flag to me: devs (or dev companies) that don't care about fellow devs.
As a freelancer, when being hired as an outsource, I ask if the company has a stack or standards to follow.
In doubt, I go vanilla as much as possible.

When employed, I always encouraged managers to check with design/dev teams before outsourcing. But, who listens to me? 🤔 😂

Show threadEthan MarcotteJan 17, 2023
@michelle This is fantastic, Michelle — thank you. (And that “the platform always wins” subhed is: 🔥🏆🏆)
Show threadMichelle BarkerJan 17, 2023
@beep Thank you Ethan! I feel like I probably stole that line off someone, but I can’t think who, lol 😅
Show threadEthan MarcotteJan 17, 2023
@michelle well then I’m grateful to them AND to you for boosting it
Show threadBrian MuenzenmeyerJan 17, 2023

@michelle quick re-writing the draft of my book:

"My point is that when evaluating the use of a dependency that has such a large reach within a project, it’s wise to also consider what happens when that dependency is no longer useful to us, or when a new release contains significant breaking changes that it might necessitate a large refactor to keep our project up to date. This is true of JS dependencies as well as CSS frameworks."

🔥

Show threadDave 🧱 Jan 17, 2023
@michelle great read, thank you! Feels funny to be in 2023 and still suffering the same consequences I had in 2012 when I was trying to detangle Bootstrap 😅
Show threadDave AlvaradoJan 17, 2023
@michelle Such a good, concise explanation. For your architects out there, this is why you should strive to make it (relatively) easy to rip out frameworks without a complete rewrite. Eventually the W3C will catch up to the good ideas pushed in frameworks.
Show threadAraJan 18, 2023
@michelle great post! I’ve always loved framework free CSS, or rather building my own “tiny bootstrap”. I did use TW for my last big project and liked it. It turned out to be the right choice for that specific project/team/situation/timeline. One aspect I really hated though, was trying to carry styles over to a non TW environment, like customizing a support site on a diff platform. Wasn’t portable at all unless you only work in TW projects and share the config.
Show threadTonio LoewaldJan 18, 2023

@michelle my knowledge of Tailwind is limited to playing a bit with the demos on their website and being blasted by the tailwind evangelism strikeforce on Twitter, but does it provide any real advantages over a few sensible conventions + CSS variables?

If you’re going to use web-components (and I do) then css-variables are the shit anyway so…

Show threadMichelle BarkerJan 18, 2023
@podperson I’m definitely with you in leaning more towards sensible conventions + CSS vars 🙂 My experience of TW’s advantages have been when working with teams and trying to implement a consistent CSS methodology across multiple projects. Especially in a WordPress agency, where some devs are not CSS experts but still need to write CSS occasionally.
Show threadTonio LoewaldJan 18, 2023
@michelle btw as far as I can tell the thing you’re doing with container queries can be done with flex and siblings. (Just use a row reversed flex and style the top left item based on its predecessor’s state.) Because it’s a forward query it should be more efficient and of course work everywhere with no polyfill.
Show threadMichelle BarkerJan 18, 2023
@podperson Some of it can, but the example is deliberately simplistic, as that was not the point of the article. There are also accessibility issues with reordering flex and grid items, so that would not be my preferred choice
Show threadTonio LoewaldJan 18, 2023

@michelle yes, I completely agree.

I’m still trying to think of a really compelling use for container queries not just related to size breaks (which are compelling enough…) since typically things being present or not tends to involve code and that code can make simple changes anyway.

Show threadMichelle BarkerJan 18, 2023
@podperson Container units are the real game-changer IMHO 👀
Show threadManuel MatuzovićJan 18, 2023

@michelle “Un-Tailwinding” what a wonderful word creation! <3

Great post!

Show threadMichelle BarkerJan 18, 2023
@matuzo My favourite writing is when I get to make up words 😆
Show threadManuel MatuzovićJan 18, 2023
@michelle I hope that one day I get booked to help a company with their CSS architecture so that I can write "Un-Tailwinding" on the invoice. 😁
Show threadHiddeJan 18, 2023
@matuzo @michelle love this phrase! Come to think of it, me and @Mchaste once un-Bootstrapped a site of an insurance company when we freelanced there, now we finally have a word for it (it was controversial at the start, but I believe everyone was very relieved and happy when we were done)
Show threadSophieJan 18, 2023
@matuzo @michelle “burning it all to the ground: £500/day”
Show threadOliver KohllJan 18, 2023
@michelle Glad to hear someone say that. Thinking about the frameworks that were around when I started creating the web app I'm still working on, nearly 20 years ago (agilebase.co.uk), I'm so glad we didn't go with any and kept things vanilla. Much of the front end code is a pretty mess and definitely due a refactor - I can see that some frameworks would be great but the longevity issue is a really hard problem.
Show threadJared White (ResistanceNet ✊)Jan 18, 2023
@michelle Great article, much food for thought. Anecdote to add to the pile: I'm helping lead a team that is actively un-Tailwinding a large React design system in favor of using vanilla CSS (with a sprinkling of Sass). Things like custom properties for design tokens, component-level tokens which inherit from them, standard stylesheets without @ apply everywhere, etc. We're still keeping TW in the pipeline for some utility classes here and there in page templates, but otherwise…buh-bye! 😁
Show threadMichelle BarkerJan 18, 2023
@jaredwhite thanks for sharing your experience! It’s interesting to hear other people’s experience with this and to know that it’s not a unique problem. Definitely agree that being able to generate utility classes is handy, but I’m leaning away from using them everywhere
Show threadAsbjørn UlsbergJan 18, 2023
@michelle @jensimmons This resonates on so many levels. 💯
Show threadJofaceJan 18, 2023
@michelle Oof that last paragraph is killer 😌💅
Show threadMatthias OttJan 18, 2023
@michelle I couldn’t agree more, Michelle! Thanks for writing this. 👏 Just had to rescue a project where the usage of Tailwind got out of hand. It needed to go live, so we weren’t able to fully un-tailwind it yet. But we’ll do that going forward. Not only does it hamper progress but for people experienced with CSS, the mess that has been created (in this case) by just cranking out stuff without putting some thought into it is just unbearable – and definitely not maintainable.
Show threadMike-麥-Mai-v1.618 😎Jan 19, 2023
@michelle fuck failwind
Show threadFeshJan 19, 2023

@michelle this is really great. I think a big problem with any library is that people use it as much as possible instead of as much is needed.

Also…people are mansplaining TW? Those dudes need to get a life

Show threadAnthonyJan 30, 2023

@michelle On the specific issue, could it be related to a limitation of the polyfill with a particular setup of your project?

> The polyfill currently only supports <style> and same-origin <link> elements.

It's quite frequent to see CSS served from a different domain than the HTML.

Show threadMichelle BarkerJan 31, 2023
@anthony I don’t think that’s the issue, as CSS is served from the same domain whether I use Tailwind or not. Thanks though!