The perils of functional CSS(browserlondon.com)

4 months ago from Browser London

  • Philip A, 4 months ago

    The article was reasonable until the conclusion. "In summary, functional CSS doesn’t make much sense to me, as a front-end developer." It sounds like a statement speaking on behalf of font-end developers. I work with front-end developers who really enjoy using functional CSS. Functional CSS just doesn't make sense to you, personally.

    Also: "I don’t think it’s a coincidence that back-end developers have written most functional CSS libraries." How did they come up with that one? Adam Morse is a designer and tachyons is one of the main functional CSS libraries. I'm active in the tachyons slack channel and there was a poll a while ago showing a reasonable 60/40ish split between people in #general. The fact that functional CSS resonates with designers should be something we should take note of and think about.

    Functional CSS is powerful for many reasons. One of them is being able to just "add a bit of padding" or "make that text orange" without having to dig into the CSS files and write new CSS. You can just whack "pa2" or "orange" to the HTML and be done with it. And there's no confusion for the next designer/developer when they edit the HTML.

    Sigh I could go on but I'll stop. I think most people who criticise functional CSS should use it for a good 6 months and see how it changes their workflow. That's what I did before forming an opinion.

    6 points
    • Aaron Wears Many HatsAaron Wears Many Hats, 4 months ago

      I tend to use a homebrewed css framework (based on collecting parts of other frameworks over the years), but I still fall back to a lot of functional classes for exactly the reasons you've stated. I honestly didn't think anyone would be against functional css, it's just another tool in the toolkit.

      1 point
    • Dan OC, 4 months ago

      I am a huge fan of functional CSS. The part I really disliked was having to use a ton of classes for reusable elements.

      <!-- Repeating these classes for every button can be painful --> Button

      But then I saw the extracting-components page from Tailwind and I was sold.

      .btn-blue { @apply bg-blue-500 text-white font-bold py-2 px-4 rounded; }

      2 points