Styling React and. Ways to Style and Best Practices In. Component Based Systems

Size: px

Start display at page:

Download "Styling React and. Ways to Style and Best Practices In. Component Based Systems"

Rudolf Bruce
6 years ago
Views:

1 Styling React and Component Based Systems Ways to Style and Best Practices In Component Based Systems

2 Two CSS properties walk into a bar. A barstool in an entirely different bar falls over.

4 4 Ways to style React components

5 4 Ways to style React components 1) CSS Stylesheets Simply import css file import './DottedBox.css' so you can have a separate css file for each component. import React from 'react'; import './DottedBox.css'; const DottedBox = () => ( <div classname="dottedbox"> <p classname="dottedbox_content">get started with CSS styling</p> </div> );.DottedBox { margin: 40px; border: 5px dotted pink; }.DottedBox_content { font-size: 15px; text-align: center; } export default DottedBox;

6 4 Ways to style React components

7 4 Ways to style React components 2) Inline styles - key is the camelcased version of the style name - value is the style s value import React from 'react'; const divstyle = { margin: '40px', border: '5px solid pink' }; const pstyle = { fontsize: '15px', textalign: 'center' }; const Box = () => ( <div style={divstyle}> <p style={pstyle}>get started with inline style</p> </div> ); export default Box;

9 4 Ways to style React components 3) CSS Modules A CSS Module is a CSS file in which all class names and animation names are scoped locally by default. import React from 'react'; import styles from './DashedBox.css'; const DashedBox = () => ( <div classname={styles.container}> <p classname={styles.content}>get started with CSS Modules style</p> </div> ); export default DashedBox;

10 4 Ways to style React components 3) CSS Modules :local(.container) { margin: 40px; border: 5px dashed pink; } :local(.content) { font-size: 15px; text-align: center; }

11 4 Ways to style React components 3) CSS Modules

12 4 Ways to style React components 4) Styled-Components Styled-components is a library for React and React Native that allows you to use component-level styles in your application that are written with a mixture of JavaScript and CSS

13 4 Ways to style React components 4) Styled-Components import React from 'react'; import styled from 'styled-components'; const Wrapper = styled.div` margin: 40px; border: 5px outset pink; &:hover { background-color: yellow; } `; const Title = styled.p` font-size: 15px; text-align: center; `; const OutsetBox = () => ( <Wrapper> <Title>Get started with styled-components </Title> </Wrapper> ); export default OutsetBox;

14 4 Ways to style React components 4) Styled-Components more styled-components a little later...

16 Welcome to the Component Age

17 Welcome to the Component Age Smart developers have invented methodologies and conventions such as - BEM - ITCSS - SMACSS - And many more which make building user interfaces easier and more maintainable by working with components

18 Welcome to the Component Age A shift in mindset: Rise of the JS frameworks React, Angular, Vue W3C s effort to standardise a web-native component system (Polymer) Pattern libraries & style guides

20 Best Practices In Component-Based Systems

21 Best Practices In Component-Based Systems 1. Build Small Components

22 Best Practices In Component-Based Systems Imagine a button component

23 Best Practices In Component-Based Systems <button class="btn">

24 Best Practices In Component-Based Systems Imagine a more important (e.g primary) button component

25 Best Practices In Component-Based Systems <button class="btn btn--primary">

26 Best Practices In Component-Based Systems But why force users of the component to know which class to attach?

27 Best Practices In Component-Based Systems Instead why not have a primary property? This is implementation detail of the Button after all.

28 Best Practices In Component-Based Systems <Button primary /> function Button(props) { const classname = `btn${props.primary? ' btn -primary' : ''}` return ( <button classname={classname}>{props.children}</button> ); }

29 Best Practices In Component-Based Systems 2. Split container and presentational components

30 Best Practices In Component-Based Systems Try to split components that handle data and/or logic from components that handle styling By separating these two concerns, reasoning about changes in your code base will be a lot easier.

31 Best Practices In Component-Based Systems Backend API changes -> modify container components Visual design or UX changes -> modify relevant presentational components on their own By separating these two types of components, you avoid doing multiple unrelated changes at the same time, thus avoiding accidental errors.

32 Best Practices In Component-Based Systems 3. Have single-use class names

33 Best Practices In Component-Based Systems Remember Button component, it has a.btn class? Changing the styles of that class should not affect anything except the Button Use every class in your CSS only once (outside of mixins like.clearfix)

34 Enforcing Best Practices Enforce best practices by removing the mapping between styles and components. I.e. Class names, IDs, JS styles in React, etc.

35 Enforcing Best Practices

36 Enforcing Best Practices Use each class only once We are enforcing the split between container and presentational components... and we make sure that developers can only build small and focused components.

37 Enforcing Best Practices Our Button once again, and back to styled-components...

38 Enforcing Best Practices

39 Enforcing Best Practices

40 Thank You! Questions?

CSS Box Model. Cascading Style Sheets

CSS Box Model. Cascading Style Sheets CSS Box Model Cascading Style Sheets CSS box model Background Width & height Margins & padding Borders Centering content Changing display type (block vs. inline) The Box Model Background Properties Property