import { Meta } from '@storybook/addon-docs/blocks';

<Meta title="Docs/Getting Started/Best Practices" />

# Best Practices

## Namespacing

	- Use Block Element Modifier (BEM)
	- Avoid custom, non-namespaced classes

### Conventions (inflexion, etc.)

	- Use PascalCase for component names
	- Use camelCase for namespaces
	- Use kebab-case for CSS variables and modifiers
		- Avoid uppercase in modifiers/CSS variable names to get them with jest

## Functional components

	- Avoid class components whenever possible

## File organisation

	- Place React components that connect to the dataStore or GraphQL in the `components` directory
	- Place React components that are included directly in a theme template in the `components` directory
	- Place React components that are included in more than one other component in the `atoms` directory
	- Place React components that are included in only one other component in that component's `atoms` subdirectory

## Props and settings
- Components that are connected to the dataStore can only receive these two props: `data` and `settings`.
- Never duplicate the schema's form or prop types for a component. You should define a constant file in the `src/constants/prop-types` or  `src/constants/schemas` directories when prop-types or schema's form are used for multiple components.
```jsx
import { footerSchemaForm } from '../../constants/components/schemas/footer';

FooterComponent.schema = () => ({
	name: 'Footer',
	form: footerSchemaForm
});

FooterComponent.propTypes = {
    data: PropTypes.shape(footerDataPropTypes),
    settings: PropTypes.shape(footerSettingsPropTypes)
};
```


## Styles

	- No hardcoded color should exist anywhere in the .scss files except in the `src/styles/definitions/_colors.scss` file
	- To set text dimensions, use the mixins available in the files located in `src/styles/definitions`

## Tools
