coryhouse / coryhouse/reactjsconsulting
Styling
- Dominant language
- JavaScript
- Stars
- 374
- Forks
- 33
- PR merge metrics
- No merged PRs in 30d
Description
# Tech
- [ ] CSS
- [ ] Sass/Less
- [ ] Inline styles
- [ ] Automatically encapsulated
- [ ] Use sparingly. Primarily for dynamic styles.
- [ ] camelCased instead of snake-case
- [ ] pixel size is inferred
- [ ] [CSS Modules](https://glenmaddern.com/articles/css-modules)
- [ ] Built into create-react-app
- [ ] [More examples](https://css-tricks.com/bridging-the-gap-between-css-and-javascript-css-modules-postcss-and-the-future-of-css/) including how to compose styles and enhance with PostCSS
- [ ] Can also use [CSS in JS](https://www.npmjs.com/package/css-in-js-loader). And here are [more wins](https://twitter.com/markdalgleish/status/1100489839688921088)
- [ ] [CSS Blocks](https://github.com/linkedin/css-blocks)
- [ ] CSS in JS
- [ ] [Styled-components](https://www.styled-components.com)
- [ ] [Emotion](https://emotion.sh)
- [ ] Libs like styled-components and emotion [can be compiled up front for faster load times](https://dev.to/rozenmd/how-one-css-in-js-library-cut-56-kb-from-my-bundle-3a8o)
- [ ] [Styletron](https://www.styletron.org/) - Uber's solution. [Features[(https://www.styletron.org/#features)
- [ ] [Treat](https://seek-oss.github.io/treat/) - Basically, CSS modules in JS. 👍 Unlike most CSS in JS, it's executed at **build time**. Only requires a runtime if you want theming. And if you want theming, it doesn't require CSS var support since runtime handles it. Like CSS modules, requires webpack. [Native CRA support may come soon](https://github.com/seek-oss/treat/issues/42). For now, can handle via react-app-rewired. Styles are written as objects rather than template literals, to both ensure type safety, and to encourage you to think of your styles as data rather than strings of CSS. [Tradeoffs](https://seek-oss.github.io/treat/background#tradeoffs)
- [ ] [Linaria](https://github.com/callstack/linaria)
- [ ] [CSS in JS vs extracted static CSS like Linaria/astroturf](https://github.com/styled-components/styled-components/issues/2377)
- [ ] [Many more](https://github.com/MicheleBertoli/css-in-js)
- [ ] [Stylable](https://stylable.io)
- [ ] CSS location: Separate file with component, centralize, or embed in component?
- [ ] Namespace
- [ ] Prefixed class names
- [ ] Naming scheme
- [ ] Offer unstyled components using Barrels?
- [ ] Theming
## Utility Libraries
- [ ] [Tailwind](https://tailwindcss.com/)
- [ ] [Cheat sheet](https://nerdcave.com/tailwind-cheat-sheet)
- [ ] Try [DaisyUI](https://daisyui.com/) for free Tailwind-based components.
- [ ] Use https://www.npmjs.com/package/prettier-plugin-tailwindcss
- [ ] Use Typewind to strongly type https://github.com/mokshit06/typewind
- [ ] https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
- [ ] [It's AI friendly](https://twitter.com/housecor/status/1661724192931209216)
- [ ] [Tachyons](https://tachyons.io/)
- [ ] [Styled System](https://styled-system.com/)
## Approaches for joining classes
- [ ] [Use template strings with ternary](https://cdn-images-1.medium.com/max/2000/1*rx-qR48XIlRoNIhPXflGMA.png)
- [ ] Can use logical and: `
- [ ] [Can use `array.join(' ')` to join an array of classes](https://cdn-images-1.medium.com/max/1600/1*JuOtn0GcLfdDo9Pgqw7ltA.png).
- [ ] Use [classnames](https://github.com/JedWatson/classnames) for dynamic assignment.
- [ ] Use [stylemapper](https://github.com/slicknode/stylemapper) to elegantly create components that have styles applied - even supports variants - no wrapping required. Especially useful for Tailwind.
## Motion / Animation
- [ ] [greensock](https://greensock.com/gsap/)
- [ ] [https://mobile-first-animation.netlify.com/](https://mobile-first-animation.netlify.com/) - Superb deck on doing development on mobile phones to assure mobile friendly performance. Just use the public URL that create-react-app lists when you `npm start` (but can also debug via Chrome browser via USB as shown in deck)
- [ ] [React Spring](https://www.react-spring.io/)
- [ ] [Framer motion](https://www.framer.com/motion/)
- [ ] https://github.com/Steveeeie/react-page-transition
- [ ] [Tip: use `hidden` to enable CSS transitions](https://twitter.com/davidkpiano/status/1207308369687699456?s=21)
- [ ] [react-transition-group](https://typeofnan.dev/how-to-animate-items-out-of-an-array-in-react/)
Contributor guide
No contributing guide indexed for this repository
Assessment
This issue has not been assessed yet.