Mohammed Erraysy

• Frontend Developer @SanadTech
• Self Taught
• Basketball Player
• ...

@merraysy

merraysy@gmail.com

Intro

Needs

• Local Scope (Isolation)
• Themes (Customization)
• Share Data (Constants...)
• DX (Developer Experience)

Choices

• Plain CSS
• Inline Styles
• CSS Modules
• CSS in JS

Plain CSS

• Local Scope (only naming conventions)
• Themes
• Data Sharing
• DX: Fine

Inline Styles

• Local Scope
• Themes
• Data Sharing
• DX: Bad

CSS Modules

• Local Scope
• Themes
• Data Sharing (complicated)
• DS: Not bad

Styled Components

• Local Scope
• Themes
• Data Sharing
• DX: Great
• PLUS:
  • ​Swap themes in the runtime easily
  • Easy code reuse

Outro

Thank
You
All