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

11–20 of 246 posts

Re: In defense of functional CSS

#11

Post by nailer »

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.

Re: In defense of functional CSS

#13

Post by jekrb »

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.

Re: In defense of functional CSS

#14

Post by madeofpalk »

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.

Re: In defense of functional CSS

#15

Post by RpFLCL »

We did this at my last job, but inevitably ended up with a mix of half functional CSS and half component CSS.

If you have lots of repeated components on a page (comments, thumbnails, tags) then it's difficult to defend repeating, potentially dozens, of the same declarations. You're better off with the component defined in a stylesheet.

I think the real use for functional CSS is for one-off adjustments on those components:

  ..
  ..
  ..
It's also a pain to edit all of the instances of an object when you want to update styles consistently. One upside, though, is that you have to consider the impact of the change in each spot.

Re: In defense of functional CSS

#16

Post by have_faith »

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 this "functional" approach doesn't solve enough real-world use cases (that I have experienced at least) to justify using it.

Re: In defense of functional CSS

#17

Post by bsaul »

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 ?

Re: In defense of functional CSS

#19

Post by lucideer »

collyw wrote: post #8
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…

I often wonder how useful this septation actually is. Most of the apps I have worked on seem to be horribly coupled despite separate css.

You can introduce implicit coupling in any app (i.e. in a non-CSS programming language). It's bad practice in both cases.

This kind of separation doesn't magically make your frontend code good, it just gives you the freedom to architect it well. Whether you do is up to you.

Admittedly it is very difficult to find an example where this has been done well, but this is I guess why we have abominations like AMP.

Re: In defense of functional CSS

#20

Post by naasking »

RpFLCL wrote: post #15

We did this at my last job, but inevitably ended up with a mix of half functional CSS and half component CSS. If you have lots of repeated components on a page (comments, thumbnails, tags) then it's difficult to defend repeating, potentially dozens, of the same declarations. You're better off with the component defined in a stylesheet. I think the real use for functional CSS is for one-off adjustments on those compon…

> If you have lots of repeated components on a page (comments, thumbnails, tags) then it's difficult to defend repeating, potentially dozens, of the same declarations.

That's where you have two choices:

1. Use your HTML templating language to define a dynamic variable representing the set of classes and use that.

2. Like the article says, make use of the functional CSS's tools to create a new class that includes the styles you use. Same idea to #1, just at a different stage.

Post reply on HN