In defense of functional CSS • Hacker News Board

Re: In defense of functional CSS

#111

Post by SamuelAdams » Thu, Sep 27, 2018, 2:50 PM UTC

crazygringo wrote: post #68

How is this any different from saying "don't write functions, just repeat the same 10 lines the function would have in each place you'd use the function"? The real kicker: > "I don't want to have to repeat the same 20 classes on every single button." That's understandable. I will say that there's a chance that repeating those 20 classes can actually be somewhat valuable, because when you get into a situation where on…

100% agree with you. I stopped reading after this statement:

>when you get into a situation where one of the buttons needs to have slightly more margin-top than the others, then it's easy to fix.

It's easy to fix in "regular" css too: just add style="margin-top: 10px;" to the button.

If this is really a one-off situation, then that is totally fine. Functional CSS feels like over-engineering an already-solved problem.

Re: In defense of functional CSS

#112

Post by newsbinator » Thu, Sep 27, 2018, 2:51 PM UTC

I like using functional CSS for utility classes

e.g.

> .mb-1 {margin-bottom: 1rem}

> .text-center {text-align: center;}

> .flex {display:flex;}

But why would you give up the templating win of CSS?

Make a standard button class.

When you want it to have a different (standard) margin, use a utility class on it.

Re: In defense of functional CSS

#113

Post by yakshaving_jgt » Thu, Sep 27, 2018, 2:52 PM UTC

toastercat wrote: post #89

crazygringo wrote: post #68

How is this any different from saying "don't write functions, just repeat the same 10 lines the function would have in each place you'd use the function"? The real kicker: > "I don't want to have to repeat the same 20 classes on every single button." That's understandable. I will say that there's a chance that repeating those 20 classes can actually be somewhat valuable, because when you get into a situation where on…

> How is this any different from saying "don't write functions, just repeat the same 10 lines the function would have in each place you'd use the function"? I think it is more comparable to using function composition, hence the whole "Functional CSS" moniker. The idea is using multiple atomic "functions" (in this case, in the form of classes) to transform an element by composing. Think like the pipe operator in Elixi…

It's actually nothing to do with the pipe operator in Elixir.

In any programming language, the order in which you compose functions is important.

In CSS — and in keeping with your analogy — the order in which "functions" are defined is important.

Re: In defense of functional CSS

#114

Post by [deleted] » Thu, Sep 27, 2018, 2:53 PM UTC

mcrittenden wrote: post #100

DevX101 wrote: post #98

Earlier quoted context omitted.

To be clear, you don't love the post, or you've changed your mind on functional CSS?

Ah sorry, I just meant I don't love the post (and I just updated my comment to make that more clear). If anything I am even more a fan of functional CSS now than I was when I wrote this. But my post is just a bad defense of it. The section about the separation of concerns is especially unconvincing, and I spent almost no time talking about the benefits of it. I'd like to rewrite it at some point.

[deleted]

Re: In defense of functional CSS

#115

Post by err4nt » Thu, Sep 27, 2018, 2:55 PM UTC

Applying CSS using utility classes it just a different way to abuse HTML for the purpose of inline styling.

- How do you set a class for states like hover, focus, active, hidden, checked, etc

- How to you use/create/style pseudo-elements?

- How do you add responsive control (like CSS media queries)?

'Functional CSS' is like sitting down at a full piano keyboard and trying to bang out a tune by only hitting one key - there's a LOT more range possible in CSS, and it's only difficult mostly because we MAKE it difficult by ignoring this.

The only/best 'functional' CSS tooling I would even look at these days is http://css-blocks.com from the people who made Sass, it's a much more modern approach and you end up with highly optimized code, HOWEVER you write human-readable CSS stylesheets and you let the CSS-Blocks compiler and Opticss optimizer output the 'functional css' you need.

Let humans do what humans are best at (writing nice stylesheets) and computers do what computers are best at (compiling things). It will outperform and human pretending to be a compiler, and with better accuracy.

Re: In defense of functional CSS

#116

Post by newsbinator » Thu, Sep 27, 2018, 2:56 PM UTC

jonahx wrote: post #63

chrisweekly wrote: post #21

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 functi…

so i'm on board with your central concern here. my issue with functional css is that your markup has no semantics. you can't just look at it and know what things are by their names. ie, what the hell is that thing described by all those styles? versus: and i know immediately what it is, and can instantly map the markup to what i see on the page. you just lose too much by not having that imo. i really like composing s…

classes like m-5 or p-2 can be semantic enough.

But using classes named with colors is silly.

It's as silly as naming a function based on the content of a string it's manipulating.

const str = "cat";

function reverseCat(str){

    return str.split("").reverse().join("");

}

Re: In defense of functional CSS

#117

Post by yakshaving_jgt » Thu, Sep 27, 2018, 2:58 PM UTC

1_player wrote: post #106

weego wrote: post #40

This stuff never scales. No one can remember the class names, no one want's to search through the examples and style guides for a project, no one want's to standardise naming of their own hacks etc and so you start of with good intentions and end up with a lot of duplication and a whole lot of shit. CSS is an expressive markup. You shouldn't try to turn it into programming.

> This stuff never scales. No one can remember class names Are you saying that with a CSS file with one-class-per-component it's easier to remember the hundreds if not thousands of class names, compared to a functional library, where you only have to remember a handful of them? You might not like it, but the very reason of existence of functional CSS libraries is to limit the number of classes and improve reusability…

Have you written a line of CSS, ever?!

Why would anyone restrict themselves to one class per component? Do you know that classes can be combined? Do you know how specificity works?

CSS fundamentally lends itself to being compositional. Suggesting that this isn't the case without added libraries is either ignorance or madness.

Re: In defense of functional CSS

#118

Post by toastercat » Thu, Sep 27, 2018, 2:59 PM UTC

yakshaving_jgt wrote: post #113

toastercat wrote: post #89

Earlier quoted context omitted.

> How is this any different from saying "don't write functions, just repeat the same 10 lines the function would have in each place you'd use the function"? I think it is more comparable to using function composition, hence the whole "Functional CSS" moniker. The idea is using multiple atomic "functions" (in this case, in the form of classes) to transform an element by composing. Think like the pipe operator in Elixi…

It's actually nothing to do with the pipe operator in Elixir. In any programming language, the order in which you compose functions is important. In CSS — and in keeping with your analogy — the order in which "functions" are defined is important.

I never said it has anything to do with the pipe operator, and I did not mean to imply that it is a direct equivalent to the pipe operator. But just as the pipe operator allows you to compose multiple pure functions, the idea with atomic CSS classes is that you are able to compose "pure" classes. The quotes are important here.

Obviously, they are not 100% comparable. CSS is not a programming language.

Re: In defense of functional CSS

#119

Post by gwbas1c » Thu, Sep 27, 2018, 2:59 PM UTC

I'm still a little confused. The wording in the example makes it difficult to figure out which example is really "functional css"

Re: In defense of functional CSS

#120

Post by criswell » Thu, Sep 27, 2018, 3:00 PM UTC

err4nt wrote: post #115

Applying CSS using utility classes it just a different way to abuse HTML for the purpose of inline styling. - How do you set a class for states like hover, focus, active, hidden, checked, etc - How to you use/create/style pseudo-elements? - How do you add responsive control (like CSS media queries)? 'Functional CSS' is like sitting down at a full piano keyboard and trying to bang out a tune by only hitting one key -…

This is how you can do all of that:

  class="hover:red" -> .hover\:red:hover { color: red }

  class="before:red" -> .before\:red::before { color: red }

  class="medium:red" -> @media (min-width: 500px) { .medium\:red { color: red }

The important thing though is it doesn't need to be used for everything. I think it makes a lot of sense for structural stuff. When you dig into like, children of a hovered element I can see it getting a little messy.