3 ms·
One of the signs of something being bloated is, when you need some compiler or "tree shaker" or <insert other fancy term here> to throw out the stuff, that you
by zelphirkalt 4y ago
One of the signs of something being bloated is, when you need some compiler or "tree shaker" or <insert other fancy term here> to throw out the stuff, that you included in the first place, but are not using.
Something like "p-2 m-2 border-red" making sense relies on some imaginary grid or table layout being used. Web design should catch up at some point and get rid of that way of thinking. Websites are not bound to be aligned according to some grid. On a website things float and take as much space as needed and as available. There is no inherent need for inventing an imaginary grid. Yet so many "design systems" cling to that outdated notion. A website is not a sheet of paper in a magazine! It is like we still haven't left bootstrap behind us, or even table layout behind us, because web designers not actually knowing CSS.
Actually look at https://web.dev/state-of-css-2022/ https://web.dev/state-of-css-2022/ (linked here on HN a few days/a day ago). CSS is easier to use than ever before! Now we can even specify our own specificity groups!
Once tailwind covers all needs for features of CSS, what will we have gained? We merely built another wrapper layer around the thing, that we should actually understand and learn. In my experience this will only lead to people thinking, that they should build something on top of tailwind, because they want something simpler, stacking yet another layer of abstraction, instead of actually learning CSS. At some point some sanity will return and do away with the whole stack of abstractions, because it indeed has become too bloated. (Note also, that no one will want to maintain your website based on tailwind, once the hype is gone and tailwind looks outdated.)
This kind of mentality of adding layer upon layer without watching out for the associated costs or realizing the power of already existing primitives is responsible for the tons of bloated websites we have today. For shipping megabytes of JS unnecessarily, instead of letting us enjoy the advantages of faster connections, like we should be able to.
About naming CSS classes: Surely not always a simple thing. Ideally the web design people would work together with the web development people and talk about their metaphors or abstractions on the website. Then find names for that and style accordingly. "How will we call this kind of thing here, with a picture and a label underneath and a rating? – Lets call it a product box." Or whatever else. They would build a common vocabulary and that would inform naming of CSS classes of the website. Additionally of course one would use a prefix, to avoid any name clashes with any other stylesheets.
- unculture 4y agoThere’s no imaginary grid here, m-2 and p-2 are just setting margins and padding. The 2 is a point in a table of sensible defaults for those values. You are free to set your own scale or just use your units of choice if you like. The defaults are well thought out though, and usually work well. The whole point of Tailwind is that the worry about naming CSS classes goes away for most part. It turns out you can safely skip the vast majority of those granular naming decisions and conversations - that’s a massive amount of saved time and brain cycles for everyone. If you’re using eg. BEM you have to come up with all these granular names for subcomponents that really no one cares about apart from you (the frontender I mean). If you’re not using BEM or similar and going for longer selectors in the main, then you have a coupling issue between the structure of your CSS selectors and the structure of the HTML that may make maintenance in the future harder.
- smrq 4y agoWhy doesn't the naming argument also apply to variable naming? (I.e. shall we call everything "x" and "y"?)
- unculture 4y agoIt’s more like “i.e. shall we inline all our variables” / avoid naming things at all. Adding a name for something is a weighty task that’s orthogonal to the task at hand. If you can avoid the name without losing understandability then it’s a win. The other side of that coin is that if you add a name it has to be worth the effort. In CSS, a number of techniques developed over the years in response to the maintainability challenges of even well thought out, traditional good practice CSS in large projects. These techniques (eg. BEM) required class names for almost every element you need to add styles to. This was to avoid long selectors that a) are hard to understand, even for experienced CSS developers and b) are tightly coupled to and generally not co-located with the HTML. Tailwind gives us away to avoid those having to choose those names, which just took a long time and lots of conversation if you wanted to get them right. Yes, it’s literally in the HTML so it’s coupled, but it’s co-located. The maintenance story is much simpler than with BEM and much much simpler than with trad CSS. Lower effort for a better long term result - it’s a win.