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

In defense of functional CSS

mikecr.it

Post reply on HN
Print view View original

21–30 of 246 posts

Re: In defense of functional CSS

#21

Post by chrisweekly »

Functional CSS is a terrific approach. Tailwind in particular is exemplary.

Absent this approach, in web projects of nearly any size, the CSS inevitably grows and becomes increasingly difficult to maintain. It takes very very few cases of "I'll just write a bit more CSS" as the default solution to bug fixes or changing requirements, before the best-intentioned design system becomes a brittle nightmare. Whereas functional CSS supports composition, and makes refactoring a reasonable proposition.

As a 20-year veteran of web UI development, I encourage skeptics to read Tailwind's docs, which make a better case than the OP or I are doing here.

Re: In defense of functional CSS

#22

Post by naasking »

nailer wrote: post #11
sklivvz1971 wrote: post #6

This seems to misunderstand the basics of why we have CSS in the first place, to separate "how something appears" from "what something is", and suggests to mix the two. The obvious result is that you would end up with similar objects with different styles. A button with "main" role should have a consistent style across instances, not be green in one place and grey in another because you forgot to add the "green" clas…

This. In addition, it means you have to edit multiple things to change how something looks. If .login-box is now going to be larger but green, you'd normally just edit the CSS to change that. With visual classes, you might have to modify the HTML to add/remove/change classes, then also edit the CSS. Or maybe only the HTML. Or maybe only the CSS. It's hard to know.

> If .login-box is now going to be larger but green, you'd normally just edit the CSS to change that.

No you don't, you can edit the one LESS/SASS/whatever file, and rebuild to reflect the change in your custom class that mixes in the desired properties, done. Or you do the same in your HTML templating language. All of the code reuse patterns you're used to from regular programming are applicable here, and that's why it's better.

Also, if you're in a larger team with separation of responsibilities, then the UI-focused person can make the change without you without having to understand CSS. Functional CSS is considerably more flexible.

Re: In defense of functional CSS

#23

Post by DanielBMarkham »

Neat.

Now add a way to hierarchically roll-up these micro-classes into semantic classes behind the scenes (Perhaps in webkit?). Compile things so you only carry-around the css micro-classes you've used, and make a flag to either deploy using the semantic or micro class method.

Best of both worlds. There are also some other mix-and-match ways of doing this. Where the real value is separating the tiny CSS adjustments you make from the business-class stuff, creating a middle tier (which this guy deploys directly)

It might make things easier. Or it could be yet another dumpster fire. I think it depends on how it's used.

Re: In defense of functional CSS

#24

Post by ARCarr »

I tried using Tachyons for a project and it really broke down when I needed to make really custom components.

For instance, one component was a cropping viewport that had to be a set height and width. There really isn't any solution for that other than adding a very specific utility class, or creating a semantic class.

Re: In defense of functional CSS

#25

Post by naasking »

bsaul wrote: post #17

I’m about to start writing a very simple html page ( think search panel + result table underneath) after having stayed out of html for a few years. What are the current best practices regarding css tools and framework that could make my life easier ?

Honestly, try tachyons for styling. I rarely have to write any CSS now, which saves considerable time.

Re: In defense of functional CSS

#26

Post by jekrb »

madeofpalk wrote: post #14
jekrb wrote: post #13

My experience with functional CSS was skepticism followed by delight. Reading BEM style actually makes me more skeptical now. A class of "Button Button__Primary" tells me much less about the styles of that button than a string of functional CSS classes would.

Sure it does. It tells you that it looks like a Button, with some primary variation styles.

Which is useful, but that's the extent of the depth of information I'm getting. I like that functional CSS lets me see "how something is" over "what something is."

Re: In defense of functional CSS

#27

Post by naasking »

have_faith wrote: post #16

I usually don't want people to be able to create infinite variations of things because of a lack of consistency. I like defining a few concrete component styles BEM style and having it easy to re-use them and other people not abuse them too much. After the initial components are defined I don't want to think about what border or colours are involved I just want to drop profile-cards in various places. It feels like t…

> It feels like this "functional" approach doesn't solve enough real-world use cases (that I have experienced at least) to justify using it.

I suggest reading:

https://hackernoon.com/full-re-write-with-tachyons-and-funct...

Re: In defense of functional CSS

#28

Post by Flenser »

What about theming/branding so that you can make your enterprise web-app fit in with each of your clients other web-apps?

If your class names are semantic like profile-card it's easy to have a branding css file for each client.

If your class names are functional like m-5 p-5 text-gray-light bg-gray-darker border border-gray-light you're going to... what? make code changes for each client?

Obviously if the website is only going to have one branding, this isn't an issue, but advice like "use semantic css" or "use functional css" needs to be put in context. What you do in an agency context for content sites would be different from an in-house web-app context, or a web-app for SAAS context.

Re: In defense of functional CSS

#30

Post by skrebbel »

dukoid wrote: post #10

Why is this named "functional" CSS? Something like "const FIVE = 5" doesn't seem to capture the essence of functional programming either?

Maybe it's not a reference to functional programming but to that other definition of "function", you know, the one used by everybody except programmers.
Post reply on HN