Hacker News Reader

Comment by jekrb | Hacker News Reader

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.

View on HN

Which is why you have a styleguide. Open your browser, open your well crafted styleguide. Here is what our "Button" looks like, here is it again when its got "Button_Primary" on it. Do you need a new type of Button? Author it in the styleguide... now go use it everywhere and be happy. I might be wrong, but in my experience a separation of concerns is the only way a large project stays healthy.

When the customer asks me to change the background of primary buttons from green to yellow and the background of nonprimary buttons to red, while changing other green backgrounds to a green-brown gradient, classes like "Button Button__Primary" tell me much more than classes like "bg-green".

Your customers speak a different language than most of mine. The requests are more like "I need the green buttons to be yellow now!" It's easy to find bg-green on buttons and just find/replace with bg-yellow.

Also, using Tailwind/functional CSS for items that are repeated over and over on your site like buttons, you can easily extract them to a component. Switching from bg-green to bg-yellow would be as simple as opening your SASS/LESS file for components or button components and replacing it in that one spot.

> It's easy to find bg-green on buttons and just find/replace with bg-yellow.

Oh, that's because running sed over all your project files, all in a set of weak typed languages is easier than changing a definition in a single place. I totally get it.

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."

Isn't this the same as regular programming? When you have a function called updateUser(), that doesn't tell you every single thing about its implementation, nor do we expect it to.

It's not supposed to tell you what it looks like. Why is it a goal to be able to tell exactly what something looks like from reading the markup?

You shouldn't need to know what the exact visual style of the button is. That's not important. You have a button, it's the primary button. What else do you need to know when coding your HTML?

Reply on news.ycombinator.com