undefined | Better HN

0 pointsuntog8y ago0 comments

That really doesn't work well with:

> Our designer could churn out neat html/css, but was a beginner in Javascript.

I write JS every day, and frankly that code looks like an unholy mess to me, so I can't imagine what it looks like to a beginner. Is "styled.div``" a function call? It's not self-evident. How do you do inheritance? Is that a template string with functions inside it? Would that CSS autocomplete?

That code looks very much like it sacrifices ease of writing CSS for ease of writing JSX. That isn't the correct tradeoff for everyone.

0 comments

giantsloth8y ago

Interesting critique. I would highly suggest checking out template literals: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Refe...

Yeah styled.div is a function as you can check out in the mdn docs I linked, it's really cool stuff.

Inheritance is done like:

  const List = styled.ul`
    li {
      padding: 10px;
    }
  `

  const HeavyPaddedList = styled(List)`
    li {
      padding: 20px;
    }
  `

If you wanted to just change the li you'd have to:

  const ListItem = styled.li`
    padding: 10px;
  `
  
  const HeavilyPaddedListItem = styled(ListItem)`
    padding: 20px;
  `

You're writing scss within the text blocks. You're correct that you need some understanding of JS.

I've never worked with designers that wrote css, I'd also probably not trust them to do so (my own failings).

I don't agree that it looks like an unholy mess (hyperbole may be lost on me), but I can see how it could be jarring at first look. I had a similar reaction when I looked at Relay (https://facebook.github.io/relay/), when they used literals for data fetching.

untogOP8y ago

> You're writing scss within the text blocks.

So, yeah, you lose all the syntax highlighting etc. that comes with just writing normal CSS. I don't think it's unreasonable for a designer to object to that - how would you feel if you were presented with a build system that required you to write all your JavaScript inside one big string statement?

Maybe it's just me, but I don't find it intuitive at all. `styled` has properties for, I assume, every HTML tag? But it can also be called as a function for inheritance purposes? And that inherited call appears to use the same tag as its parent... but what if I want to reuse styles across different tags? How could I define some shared CSS properties I'd use across different elements?

Don't get me wrong, it is cool stuff. But it also feels far too much like hand-wavey magic stuff. I've literally never used Vue before, but looking at this page:

https://vuejs.org/v2/guide/single-file-components.html

I have zero confusion about how to write styles for it. And I really don't understand why styled-components would be worth the extra effort by comparison. What does it bring to the table? It's different without a compelling reason for being different.

shados8y ago

> So, yeah, you lose all the syntax highlighting etc. that comes with just writing normal CSS

Except you don't. Editor support is quite good, and syntax highlighting, syntax validation, auto-completion, etc all work.

I mean, same way with Vue really. If the editor didn't know wtf a Vue file is, you'd lose all the integration too.

1 more reply

threatofrain8y ago

I would argue that the right boundary for designers to be working with front-end people is via central company style assets, and not at the component level where ad-hoc styles should be stored.

It seems a little odd that the front-end designer, who is in our hypothetical not comfortable enough to actually work on component themselves, would be brought in to tag-team with someone else who also doesn't feel comfortable enough to do the work themselves.

j / k navigate · click thread line to collapse