css?

[nsfmc]

css is the only thing that people have very philosophical feelings about, i do too, but i am more maybe less dogmatic than the average bear, so i'm going to outline a few options. additionally, i am going to suggest we avoid stuff like scss or less because i have found them to be both problematic in the past and also we can get a lot of things we want from them using

global css

this is the "default", we have a bunch of css files and we use global class names. this is fine-ish for a small project (it may work just fine for this project even), but it requires us to make sure we don't step on each other's classnames if we both develop the css at the same time.

we would basically in our html template somewhere in the head just have a single css file we load up and we would edit just that all the time.

.fancy-button {
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ccc;
}

import 'app.css';

const FancyButton = ({children}) => <button className="fancy-button">{children}</button>;

export default () => <div>
  <FancyButton>Click This!</FancyButton>
</div>;

css modules

i am hesitant to recommend this only because i don't know many people (other than me and my coworkers) who use these and because the setup is a wee bit complex. that said, css modules are interesting because they allow you write css in a bunch of separate files and you don't have to deal with memorizing which classes will collide with which other classes because you only worry about classes in each css file.

.fancyButton {
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ccc;
}

import css from './button.css';

const FancyButton = ({children}) => <button className={css.fancyButton}>{children}</button>;

export default () => <div>
  <FancyButton>Click This!</FancyButton>
</div>;

styled components

styled components are very new, but are really just a fascinating kind of syntactic sugar for css + react based on this idea that "pretty much every non text-node in your dom is used for styling or layout".

import styled from 'styled-components';

const FancyButton = styled.button`
  background-color: white;
  border-radius: 4px;
  border: 1px solid #ccc;
`;

export default () => <div>
  <FancyButton>Click This!</FancyButton>
</div>;

there are other css-in-js options and they all have different tradeoffs, but this is the sort of gradient from 'familiar' to 'wtf' you will see in the world of react+css. I can throw some more examples, but i wanted to see which of those felt most interesting to you.

[chiaberry]

I think I'm leaning towards option A or C, but honestly I can be swayed to any of them. I'm not 100% clear on how option C would work yet, but it seems interesting.