Hacker News Board Hacker News, browsed like a classic message board
Live data from Hacker News

Tailwind: style your site without writing any CSS

jvns.ca

Post reply on HN
Print view View original

61–70 of 185 posts

Re: Tailwind: style your site without writing any CSS

#61

Post by lmm »

blinky1456 wrote: post #46
lmm wrote: post #45

I've been saying for years that, in these days where all HTML is generated, CSS makes no sense and we might as well just style inline. You probably already have a "button" class in your UI framework that contains the HTML for rendering a button; put the styling there too.

So if you have a large number of buttons or other elements with the same class you will be repeating yourself over and over. With elements with a large number of style rules, you add a lot of very long lines to your html. This would be a nightmare to work on/maintain.

> So if you have a large number of buttons or other elements with the same class you will be repeating yourself over and over.

In the HTML, sure. But so what? It gets compressed in transport so there won't be significant overhead there (similar to how remote desktop protocols that send images with compression turn out to be just as efficient as those that tried to send intelligent drawing commands), and the browser has to compute the final style for each element anyway so there's no overhead in-memory either.

> This would be a nightmare to work on/maintain.

HTML is an output format, you don't edit/maintain HTML any more than you edit/maintain binary machine code. And keeping the styles inline allows better encapsulation: the styling for each component lives in that component, you don't have the spooky action at a distance of child selectors.

Re: Tailwind: style your site without writing any CSS

#62

Post by PavlovsCat »

I always liked to mix both, having somewhat "semantic" classes like .message.error, but then also things like

    .w100 { width: 100%; }
    .nopad { padding: 0; }
etc. to modify the "semantic" classes where needed, in essence creating a mini-framework for every new project.

Re: Tailwind: style your site without writing any CSS

#63

Post by judofyr »

Isofarro wrote: post #30
judofyr wrote: post #21

Earlier quoted context omitted.

It's based on how often you use a helper. For instance, changing letter spacing is verbose ( https://tailwindcss.com/docs/letter-spacing ) as it's not something you use that often. Tweaking spacing is very common and "padding-horizontal-2" uses an awful amount of characters.

In what context is this "an awful amount of characters" an issue? GZip compression is fairly standard these days, and languages based on plain english (or similar languages) has a better level of compression than random text because of repetitive nature of sequences of characters. I can't believe that mnemonic based languages are easier and more readable than something closer to a natural language. And with the assum…

It's an awful amount of characters once you multiply it. For instance, the first example (https://tailwindcss.com/docs/what-is-tailwind/) would be twice as big:
After spending more than, say, two hours with Tailwind you'll probably read the first line much faster than second one (since there's less to read and you don't need to scroll). Humans are very good at pattern recognition, and you'll quickly read "mb" as a symbol in itself and not as "m[argin] b[ottom]".

> I can't believe that mnemonic based languages are easier and more readable than something closer to a natural language.

Well, it's worked out pretty well in mathematics. This is not about file size at all. It's about defining an "alphabet" of common concepts.

Re: Tailwind: style your site without writing any CSS

#64

Post by chrisfrank »

androidgirl wrote: post #58
chrisfrank wrote: post #43

Earlier quoted context omitted.

I've also found Tachyons & React to be an amazing combination. The only trouble I've had is extracting common CSS class strings into tweakable components, e.g. a whose background color you can easily override, or a with tweakable font weight. I wrote a tiny (1kb) library to make this easier. For anyone working with React and functional CSS, I hope it's helpful: https://www.npmjs.com/package/nanostyled

Seems like an interesting library! I also encountered this issue, but I ended up just passing in colors/borders/spacing as props. I will have to see how that holds up for complicated UIs.

Thanks! I started by just passing props too, and I could see that approach working forever. I just got tired of having to always specify , when 90% of the buttons in the app were blue with a border.

Re: Tailwind: style your site without writing any CSS

#65

Post by corobo »

Raphmedia wrote: post #40
mbrock wrote: post #33

Earlier quoted context omitted.

Oh no, laziness! Someone is doing something in an easy and convenient way that somehow doesn't match up with other people's ideals of conceptual purity! :'(

Bloating your markup with classes is simply a bad habit. It bites you hard in the long run. Even the framework that they are using proposes better alternatives. “ Tailwind encourages a "utility-first" workflow, where new designs are initially implemented using only utility classes to avoid premature abstraction. While we strongly believe you can get a lot further with just utilities than you might initially expect, w…

Could you suggest how it's bloating the markup and how it'll bite you in the long run?

I understand that maybe adding a bunch of classes for every element will increase the overall size of the page but if it's served with gzip compression doesn't it actually (maybe only technically) work better to have repetitive classes everywhere instead of unique class names?

Re: Tailwind: style your site without writing any CSS

#66

Post by mkarnicki »

koboll wrote: post #16
Isofarro wrote: post #4

It puzzles me why these Atomic CSS based systems use various mnemonic systems instead of plain English which is much more understandable. I'm not a fan of human-powered text compression.

At that point, why not just write actual CSS?

Because you'll have 29 different margins, 67 different left paddings, etc all over the place. Tailwind allows you to create a consistent design system. CSS was supposed to be "write one class, use it everywhere instead of inlining". Usually it ends up with nobody reusing that class and everyone creating their on in the same codebase. There's an article I don't have a link handy, which explained how ridiculously many classes were used by GitHub/Lab, Airbnb, etc. Now even GitHub have their own utility based CSS system and others are following along, including Bootstrap with their CSS utility classes.

Re: Tailwind: style your site without writing any CSS

#67

Post by dna113 »

Lol here we go again. Why does this get people so riled up?

I suspect people who immediately dislike this maybe are not using some type of component-based UI. CSS classes are all about code-reuse. If you have the concept of say a "button" in your UI, and you are copying your button markup every where you use that "button" then it certainly makes sense to have a class for your button markup that encapsulates the styles for that button in a style sheet somewhere.

If using a button component however, you've already created a place for the concept of your button to exist. At that point if you go on making a class in some style sheet that also represents the concept of your button, now your button concept exists in multiple places, linked together by one or several class names. That seems a lot messier to me than using utility first styles, but I don't think it really makes a huge difference one way or another.

Re: Tailwind: style your site without writing any CSS

#68

Post by z3t4 »

CSS has a bit of a learning curve, the probably most difficult to understand is the C (cascading ) part, and where something more specific over-rides something less specific. It's simple. Yet complex. But it's very powerful to be able to change the look of something, without touching the code that makes up the site/app content. And change theme by replacing the CSS-file.
Post reply on HN