search

bitovi / react-exercises

0 stars 1 forks source link

Styling #3

Closed mikedane closed 4 years ago

mikedane commented 4 years ago

This issue is to discuss styling for the exercises:

As it currently stands, the tic-tac-toe game just uses a normal css file and imports it into App.js, it also incorporates the style={{...}} prop for some styling that relies on prop data. Obviously theres some other ways styling can be implemented in React, with some requiring external frameworks (StyledComponents, Emotion, etc).

Personally I'm a fan of CSS in JS solutions (Emotion), as well as low code styling solutions like TailwindCSS. No matter what I think it will be valuable to discuss the different options in the "presentation" portion of the training, but as far as having them actually implement an alternative styling framework/solution I'm not so sure it's necessary.

Simply importing a css file should at least be fairly familiar to them, and won't require a styling paradigm shift like what would be required for using StyledComponents or some alternate solution. We could even use SCSS instead of CSS

So two questions for discussion:

  1. Which styling solutions should be presented in the exercise, my picks are StyledComponents, Emotion, TailwindCSS and importing SCSS

  2. Which styling solution should we have them implement

christopherjbaker commented 4 years ago

Between Emotion and StyleComponents, Emotion seems to win in just about every category.

My preferences are usually either Emotion (with css style) or CSS/SCSS modules, depending on how the design/ui team works. I lean towards emotion when possible, but (S)CSS modules are a close second.