• Define colors only in themes.

  • Define fonts only in themes.

    1. // bad
    2. export default withStyles(() => ({
    3.   towerOfPisa: {
    4.     fontStyle: 'italic',
    5.   },
    6. }))(MyComponent);
    8. // good
    9. export default withStyles(({ font }) => ({
    10.   towerOfPisa: {
    11.     fontStyle: font.italic,
    12.   },
    13. }))(MyComponent);

  • Define fonts as sets of related styles.

    1. // bad
    2. export default withStyles(() => ({
    3.   towerOfPisa: {
    4.     fontFamily: 'Italiana, "Times New Roman", serif',
    5.     fontSize: '2em',
    6.     fontStyle: 'italic',
    7.     lineHeight: 1.5,
    8.   },
    9. }))(MyComponent);
    11. // good
    12. export default withStyles(({ font }) => ({
    13.   towerOfPisa: {
    15. }))(MyComponent);

  • Define base grid units in theme (either as a value or a function that takes a multiplier).

    1. // bad
    2. export default withStyles(() => ({
    3.   rip: {
    4.     bottom: '-6912px', // 6 feet
    5.   },
    6. }))(MyComponent);
    8. // good
    9. export default withStyles(({ units }) => ({
    10.   rip: {
    11.     bottom: units(864), // 6 feet, assuming our unit is 8px
    12.   },
    13. }))(MyComponent);
    15. // good
    16. export default withStyles(({ unit }) => ({
    17.   rip: {
    18.     bottom: 864 * unit, // 6 feet, assuming our unit is 8px
    19.   },
    20. }))(MyComponent);

  • Define media queries only in themes.

    },
    }))(MyComponent);

    // good
    export default withStyles(({ breakpoint }) => ({
    container: {

    1. width: '100%',
  1.     [breakpoint.medium]: {
  2.       width: '50%',
  3.     },
  4.   },
  5. }))(MyComponent);
  1.     [fallbacks.display]: 'table',
  2.   },
  3. }))(MyComponent);
  5. // good
  6. export default withStyles(({ fallback }) => ({
  7.   .muscles {
  8.     display: 'flex',
  9.   },
  11.   .muscles_fallback {
  12.     [fallback('display')]: 'table',
  13.   },
  14. }))(MyComponent);
  15. ```

  • Create as few custom themes as possible. Many applications may only have one theme.

  • Namespace custom theme settings under a nested object with a unique and descriptive key.

    1. // bad
    2. ThemedStyleSheet.registerTheme('mySection', {
    3.   mySectionPrimaryColor: 'green',
    4. });
    6. // good
    7. ThemedStyleSheet.registerTheme('mySection', {
    8.   mySection: {
    9.     primaryColor: 'green',
    10.   },