Giters

chibicode / react-functional-css-protips

:sunglasses: Functional CSS - The Good, The Bad, and Some Protips for React.js Users

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Few thoughts on this document

rafaelrinaldi opened this issue · comments

commented

Hey, thanks for putting this together! So, I have a few thoughts that I feel like sharing with you:

  • You could simply use inline styles for non-reusable stuff:
const Thing = () => <div className="text-left p2" style="font-size: 1.3rem; margin-left: -2px;" />;
  • Instead of using the virtual class thing, you can simply use variables:
const styles = {
  'heading': 'caps h2 font-san-francisco'
}
const Title = () => <h1 className={styles.heading}></h1>;
  • It would also be nice to mention on the article that memorizing class names for either Tachyons or Basscss is definitely not a big deal since they're essentially mnemonics (just like vim does, etc)
  • I feel like sticking to this kind of approach is way more challenging for crazy fast paced projects (advertising) compared to products (startups). What do you think?
  • What do you think about this idea that I had? 😄

Again, thanks for putting this together and I hope my comments make sense 👍

commented

@rafaelrinaldi thanks a lot for your feedback! I just pushed commits 5005fd9 be45abc which address some of the things you brought up.

You could simply use inline styles

Yup, but I also added on the above commit that inline styles suck for things like :hover and @media queries. I tried Radium, but it wasn't as good as CSS.

You can simply use variables

Yup, that's what I used to do, but then I realized that using cn would be a cleaner API.

memorizing

Yup, I renamed it to "familiarizing"

way more challenging for crazy fast paced projects (advertising)

Maybe - I actually never worked for advertising/consultancy, so I can't say for sure.

atomify

I took a look! Cool idea. I starred it!

commented

I've got a question. Doesn't it make more sense that the virtual classes are converted to real classes at buildtime instead of at runtime? Isn't that the same every time it gets loaded or do I misunderstand something?

commented

Doesn't it make more sense that the virtual classes are converted to real classes at buildtime instead of at runtime?

Yes! Definitely. You can probably write a webpack script to do the build-time transformation, but I was too lazy (and cn is helpful anyway). With react, if you can avoid re-render (by using pure render), I think there's not much performance cost of doing runtime conversion.

commented

Thanks for your answer, wasn't sure if it was possible