Skip to content

Latest commit

 

History

History
236 lines (224 loc) · 9.86 KB

NOTES.md

File metadata and controls

236 lines (224 loc) · 9.86 KB
Raw

Topics

  • Media Queries
  • Assets
    • Images
    • Fonts
  • Cascading
    • avoid duplication of rules
  • Loading order
    • !important
    • selector specifity
  • Globals, leaks, Namespacing
  • Caching and code splitting
  • component dependency chain
  • SSR -> static file
  • Browser execution speed
    • Bootstrap JS and CSSDOM takes time
    • Browsers have optimized their execution since the beginning
  • React Native
  • METHODOLOGIES
    • BEM
    • OOCSS
    • SMACSS
    • ATOMIC CSS
    • SUIT CSS
  • Problems with Spaghetthi CSS
    • Global Namespace & Isolation
    • Nondeterministic
    • Maintenance and changes
  • CSS Processor features
    • Variables
    • Mixins
    • Nesting
    • Math
    • Color Functions
    • Auto-Prefixing
    • Imports
    • Minification
    • Dependencies
    • Dead code removal
    • TYPES
      • PRE-PROCESS
        • Sass
        • Less
        • Stylus
      • POST-PROCESS
        • PostCSS
        • cssnext
  • REACT
    • Inline Styles
      • JavaScript
      • Logic
      • Dynamic
      • camelCase css property Names
      • Animation
      • Object Literals
      • Issues
        • Sweeping changes are difficult
        • Logic spread across components
        • Pass some styles via Props to share code
        • Media Queries
      • Features That libraries provide
        • Media queries @media (min-width: 600px)
        • Pseudo classes :hover :active
        • Autoprefixing - border, flex, box-shadow etc
        • Extract CSS into separate files - avoid FOUC

Talk ideas

  • Learning from other languages and other frameworks. From other developers. Student of core concepts not frameworks.
  • From next.js README
    • Why CSS-in-JS?
      • next/css is powered by Glamor. While it exposes a JavaScript API, it produces regular CSS and therefore important features like :hover, animations, media queries all work.
      • There’s no tradeoff in power. Instead, we gain the power of simpler composition and usage of JavaScript expressions.
      • Compiling regular CSS files would be counter-productive to some of our goals. Some of these are listed below.
      • Please note: we are very interested in supporting regular CSS, since it's so much easier to write and already familiar. To that end, we're currently exploring the possibility of leveraging Shadow DOM to avoid the entire CSS parsing and mangling step [#22]
  • Server side rendering
  • Animation
  • Component state vs Functional Components

Frameworks

Helper Frameworks

Talks related to CSS in React

Reads

Communities

React Libraries that offer UI components

Future

Shadow DOM and Web components

Other Languages and libraries

Tools

http://staxmanade.com/CssToReact/ https://babeljs.io/repl/

My Talks

ReactJS at Trulia!

SXSW March 9th-March 19th

Webpack

  • file loader - generates files with hashes, can set a min size limit
  • url loader - creates inline data URLs for small resources
  • image loader - compress images
  • css loader - finds import and url() statements and turns them into require
  • style loader - style loader injects the resulting css into the bundle, JSON to style