### Styled components names
Try to avoid using "styled" word in name of component (it's obvious), let's give some info about it:
```javascript
// BAD
const StyledButton = styled(Button)`
// some styles
`
```
```javascript
// GOOD
const HeaderButton = styled(Button)`
// some styles
`
```
---
### Keep styles in one place
```javascript
// BAD
<HeaderButton>Click</HeaderButton>
<HeaderButton style={{border: 'none'}}>Clack</HeaderButton>
...
const HeaderButton = styled(Button)`
// some styles
`
```
```javascript
// GOOD
<HeaderButton>Click</HeaderButton>
<HeaderButtonSecondary>Clack</HeaderButtonSecondary >
...
const HeaderButton = styled(Button)`
// some styles
`
const HeaderButtonSecondary = styled(HeaderButton)`
border: none;
`
```
---
### Avoid using combine selectors on nesting
if it's not necessary (ex: style overriding in UI library)
```javascript
// BAD (only when necessary)
const Header= styled.header`
// some styles
button {
// some button styles
}
`
```
```javascript
// GOOD
const Header= styled.header`
// some styles
`
const HeaderButton = styled.button`
// some button styles
`
```
---
### In styled components use single function instead of many
```javascript
// BAD
const HeaderButton = styled(Button)`
margin: ${({theme}) => theme.baseSize};
background-color: ${({theme}) => theme.button color};
`
```
```javascript
// GOOD
const HeaderButton = styled(Button)(({theme}) => css`
margin: theme.baseSize;
background-color: theme.button.color;
`)
```
---
### Variables, variables, variables
Whenever a value is being reused, it should be a variable. This especially applies to margins, fonts and font sizes, and colors.
> **Note:** (Still didn't resolved by our designers)
```javascript
// BAD
const HeaderButton = styled(Button)`
margin: 16px;
background-color: blue;
`
```
```javascript
// GOOD
// with theme
const HeaderButton = styled(Button)(({theme}) => css`
margin: theme.baseSize;
background-color: theme.button.color;
`)
// without theme
const baseSize = '16px';
const buttonColor = 'blue';
const HeaderButton = styled(Button)`
margin: ${baseSize};
background-color: ${buttonColor};
`
```
---
### Nest media queries under each element
So that all styles affecting that element can be found in one place.
```javascript
// BAD
const Main = styled.main`
@media (max-width: ${mobileSize}) {
header {
// some styles
}
footer {
// some styles
}
}
`
```
```javascript
// GOOD
const Header = styled.header`
@media (max-width: ${mobileSize}) {
// some styles
}
`
const Footer = stuled.footer`
@media (max-width: ${mobileSize}) {
// some styles
}
`
```
---
### Keep logic of component inside custom hook
```javascript
// BAD
function Component() {
const { isLoading, isError, data, error } = useQuery('todos', fetchTodoList);
return <>
{isLoading && <Spiner/> || ...
}
```
```javascript
// GOOD
function Component() {
const state = useComponent()
return <>
{state.isLoading && <Spiner/> || ...
}
```
---
### Avoid destructuring assignment inside of components
```javascript
// BAD
function Component({someProp}) {
const { isLoading, isError, data, error } = useComponent()
return <>
{isLoading && someProp && <Spiner/> || ...
}
```
```javascript
// GOOD
function Component(props) {
const state = useComponent()
return <>
{state.isLoading && props.someProp && <Spiner/> || ...
}
```
---
### Keep logic in components or in custom hooks in pretty ordered groups (useState near by others useState's, useRef near by others useRef's)
```javascript
// BAD
const ref = useRef();
const [state, setState] = useState();
const computedValue = useMemo(() => ...);
const [state2, setStat2] = useState();
const ref2 = useRef();
const computedValue2 = useMemo(() => ...);
```
```javascript
// GOOD
const ref = useRef();
const ref2 = useRef();
const [state, setState] = useState();
const [state2, setStat2] = useState();
const computedValue = useMemo(() => ...);
const computedValue2 = useMemo(() => ...);
```
---
### Use function declaration when it possible
it's allowed to use arrow functions if it necessary
```javascript
// BAD
const Component = (props) => {
return ...
}
```
```javascript
// GOOD
function Component(props) {
return ...
}
```
---
### Keep inside hook everything about its entity
```
// BAD
use-workflow-info.ts
use-workflow-params.ts
```
```
// GOOD
use-workflow.ts
```
---
### Keep separated business logic of the component and its dispalying logic
You can put fetching, transformation, mutation and any work with business data inside your custom hook, but leave all additional properties right inside of component, if you need them for correct displaying.
```javascript
// BAD
const Component = (props) => {
const {isSpinnerShown, isCtFetching, isModelFetching, ...etc} = useComponent()
...
}
```
```javascript
// GOOD
const Component = (props) => {
const { isCtFetching, isModelFetching, ...etc} = useComponent()
const isSpinerShown = isCtFetching && isModelFetching
...
}
```
```javascript
// GOOD
const Component = (props) => {
const { isCtFetching, isModelFetching, ...etc} = useComponent()
const isSpinerShown = useMemo(() => isCtFetching && isModelFetching, [isCtFetching, isModelFetching]);
...
}
```
---
Google Drive
Gist
Clipboard
Sign in with Wallet
