# CSS ADR Discussion Topics Possible deciding factors: * How foreign is it to the team? Will there be a steep learning curve? Does anyone outwardly dislike it (e.g. CSS-in-JS)? * Frontend tech tends to be fleeting. Is our approach going to be around, be widely used, or at least be supported in 5 years? * Does it align with our desire to create components * Does it work smoothly with React components, or will we need to hack it up to make it work how we want? ## Infrastructure “Which CSS tools and build conventions should we make available to our development workflow?“ **1. CSS variables** _Does this belong in this category? This is more about architecture, but also has implications for SCSS. I wonder if we should first decide whether or not to make SCSS available as part of infrastructure, and then later decide if we want to use CSS variables or SCSS variables._ Easy to target [with JavaScript](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties#Values_in_JavaScript) [Great for theming](https://css-tricks.com/theming-with-variables-globals-and-locals/). Has [reasonable browser support](https://caniuse.com/#feat=css-variables). Bento menu from the Monitor site uses CSS vars **2. Pre-processor (SCSS)** If yes, should we limit its usage (e.g. only nesting)? If we’re using CSS variables we’ll need to restrict usage of functions. If we’re not using CSS variables we can use functions. How should we approach colors, type, breakpoints, padding variables? If we opt not to use SCSS immediately, it’s easier to add after the fact than remove later down the road. **3. Styled components** Works with SCSS variables, but also great for CSS variables, where you can specify something like `--btn-bg: var(--bg-color, #eee);` so it can be set and also have a fallback. [How to leverage styled components and css variables to build truly reusable components in React](https://medium.com/fbdevclagos/how-to-leverage-styled-components-and-css-variables-to-build-truly-reusable-components-in-react-4bbf50467666) [JSS](https://cssinjs.org/?v=v10.1.1) **4. CSS modules** [What are CSS Modules and why do we need them?](https://css-tricks.com/css-modules-part-1-need/) Supports obfuscating class names: [How to obfuscate CSS class names with React and Webpack](https://develoger.com/how-to-obfuscate-css-class-names-with-react-and-webpack-20e2b5c49cda) **5. Global styles** Regardless of the per-component approach we take, we will likely need some global styles. I’m assuming: * Normalize.css * body, html styles * Global font family, size, etc * If using SCSS, globally available variables, functions, mixins **6. Browser support** Do we want to: * Progressively enhance or gracefully degrade? * Do we want a hard and fast browser support line? * Should we use something like [autoprefixer](https://www.npmjs.com/package/autoprefixer)? ## Architecture “Which approaches and methodologies should we take when crafting styles?“ **1. Class name / naming** ACSS? BEM? OOCSS? Nothing? **2. Utility library** Should we use an existing library or build our own utility library, if any? [Tachyons](http://tachyons.io/) (shortform) [Tailwind](http://t) (shortform) [Expressive CSS](https://johnpolacek.github.io/expressive-css/) (longform) [Solid](https://solid.buzzfeed.com/) (longform) **3. Flexbox v. Grid** [The ultimate CSS battle: Grid vs Flexbox](https://hackernoon.com/the-ultimate-css-battle-grid-vs-flexbox-d40da0449faf) **4. Prettier / linting** Should we default to whatever configs we have already, or should we explicitly define what we’d like to see? **5. Declaration order** My preference is the [@mdo code guide declaration order](https://codeguide.co/#css-declaration-order): positioning, box-model, typography, visual, misc.