This document discusses different approaches for using CSS in React applications. It begins by outlining some of the issues with plain CSS, including lack of encapsulation and global namespace pollution. It then examines different methodologies for organizing CSS, including OOCSS, BEM, and SUIT CSS. Next, it covers pre/post-processors like Sass, LESS, and PostCSS. The document dives into examples of implementing styles in React using inline styles, CSS modules, Radium, and Styled Components. For each approach, it highlights the syntax and notes advantages and limitations. Finally, it closes with a brief look at emerging technologies that may impact future CSS practices.
4. Familiarity - (CSS Level 1 released 19 years ago)
Optimized Browser parsing and layout
JavaScript DOM API
Inheritance structure - JSON like
Media Queries - size and feature detection
Pseudo Selectors - browser states
Basic math via calc()
CSS3 (THE GOOD)
5. Flat - nested rules not supported
Needs vendor pre xes
No variables, no functions
Some dynamic updates still require JavaScript
CSS3 (THE BAD)
6. Global namespace pollution
Importance, speci city wars, & eventually !important
Nondeterministic, depends on source order
Encapsulation - sharing code across components is scary
Changes & dead code elimination are manual
Missing rules and syntax errors at runtime
CSS3 (THE UGLY)
7. (like ux for CSS)
Object-Oriented CSS (OOCSS)
Scalable and Modular Architecture for CSS (SMACSS)
Block, Element, Modi er (BEM)
ATOMIC CSS
SUIT CSS
METHODOLOGIES
8. (like babel for CSS)
SASS
LESS
Stylus
PostCSS
Autopre xer / cssnext
PRE/POST PROCESSORS
22. No pseudo selectors :hover :before etc.
No media queries @media viewport etc.
No rule nesting
No auto pre xing
No CSS extraction
FOUC
ISSUES WITH USING THE PLAIN
JSON object
27. 14. Like <span style={[
Wraps your function or component with @decorators
Creates a class to manage state for :hover :active :focus
Radium.getState(this.state, 'btnPrimary', ':hover')
Style similar child elements with .map()
matchMedia for media queries - IE poly ll, server-side?
Styles are inline, extract into CSS for production?
RADIUM NOTES
28. No globals (with caveats)
Built in dead code elimination, only used components
Presentation logic is in your view, nd and edit
State, constants
Composition, loops, computation
Distribute via import and export
Dynamic styling, app & DOM state e.g. data attributes
Some :pseudo selectors re-implemented in JavaScript
For example :last-child becomes i === arr.length - 1
INLINE STYLES (THE GOOD)
29. No ::after ::before ::selection
Media queries have to use window.matchMedia()
Autopre xing display: -webkit-flex; display: flex;
Animations via @keyframes re-implemented in JS
Highest priority before !important No Speci city Cascading
Performance
Debugging in devtools is a pain
Duplicate markup for similar elements
INLINE STYLES (THE BAD)
31. Based on Interoperable CSS - loadable, linkable CSS
Works with SASS, PostCSS etc.
Broken CSS = compile error
Using an unde ned CSS Module = no warning
REACT-CSS-MODULES
34. 14. }
styles object or this.props.styles[yourClasslassName]
Con gure your component classnames via localIdentName
Webpack CSS loader [path]___[name]__[local]___[hash:base64:5]
Generated classname styles-___likebutton__btn-primary___HYx7V
No overruling, intentionally nor unintentionally
Composition composes: parentClass same as @extend in Sass
Others from ICSS :global :export :import
Use extract text plugin in production
REACT-CSS-MODULES NOTES
39. 14.
Autopre xing included for free
Write plain CSS, no weird poly lls needed
Generated classnames are namespaced btn-primary gjkSC
Injects style tags into the document head
Supports server-side rendering, but not extract text plugin
keyframes helper keeps your rules local to your component
Theming is built in
STYLED COMPONENTS NOTES