4 ms·

> 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

by keb_ 8y ago

> 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 Elixir: other_function() |> new_function() |> baz() |> bar() |> foo()

yakshaving_jgt 8y ago
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.
- keb_ 8y ago
  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.
  - yakshaving_jgt 8y ago
    It's a weak analogy. In programming, `f . g . h` is not the same as `h . f . g`. In CSS, `<i class="a b c"></i>` is the same as `<i class="b c a"></i>`. In programming, the order in which you define functions is not important — it's the order in which you use them which is important. In CSS, it is the exact opposite. To further drive the point home: assuming the names of these classes aren't lying, what colour is the text of this element? <div class="text-red text-blue">foo</div> It depends on the order in which the classes were defined. This also demonstrates why "pure" is a poor choice of word when describing anything to do with CSS. Nothing here is "pure".
    - keb_ 8y ago
      I understood what you meant. Whether or not I'm supportive of the terminology used for "Functional CSS" is a different story.
- walterstucco 8y ago
  > In any programming language, the order in which you compose functions is important. Not really [3,2,1] |> map(x => x * 2) |> sort is the same of [3,2,1] |> sort |> map(x => x * 2)
- strken 8y ago
  This is a really interesting discussion because it makes me wonder what CSS could have been like if it had cascaded per-element according to the order of classes.

by keb_ 8y ago

yakshaving_jgt 8y ago

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.

keb_ 8y ago
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.
- yakshaving_jgt 8y ago
  It's a weak analogy. In programming, `f . g . h` is not the same as `h . f . g`. In CSS, `<i class="a b c"></i>` is the same as `<i class="b c a"></i>`. In programming, the order in which you define functions is not important — it's the order in which you use them which is important. In CSS, it is the exact opposite. To further drive the point home: assuming the names of these classes aren't lying, what colour is the text of this element? <div class="text-red text-blue">foo</div> It depends on the order in which the classes were defined. This also demonstrates why "pure" is a poor choice of word when describing anything to do with CSS. Nothing here is "pure".
  - keb_ 8y ago
    I understood what you meant. Whether or not I'm supportive of the terminology used for "Functional CSS" is a different story.
walterstucco 8y ago
> In any programming language, the order in which you compose functions is important. Not really [3,2,1] |> map(x => x * 2) |> sort is the same of [3,2,1] |> sort |> map(x => x * 2)
strken 8y ago
This is a really interesting discussion because it makes me wonder what CSS could have been like if it had cascaded per-element according to the order of classes.