Naming

  • Use camelCase for object keys (i.e. “selectors”).

    Why? We access these keys as properties on the styles object in the component, so it is most convenient to use camelCase.

    1. // bad
    2. {
    3.   'bermuda-triangle': {
    4.     display: 'none',
    5.   },
    6. }
    8. // good
    9. {
    10.   bermudaTriangle: {
    11.     display: 'none',
    12.   },
    13. }

  • Use an underscore for modifiers to other styles.

    Why? Similar to BEM, this naming convention makes it clear that the styles are intended to modify the element preceded by the underscore. Underscores do not need to be quoted, so they are preferred over other characters, such as dashes.

    1. // bad
    2. {
    3.   bruceBanner: {
    4.     color: 'pink',
    5.     transition: 'color 10s',
    6.   },
    8.   bruceBannerTheHulk: {
    9.     color: 'green',
    10.   },
    11. }
    13. // good
    14. {
    15.   bruceBanner: {
    16.     color: 'pink',
    17.     transition: 'color 10s',
    18.   },
    20.   bruceBanner_theHulk: {
    21.     color: 'green',
    22.   },
    23. }

  • Use selectorName_fallback for sets of fallback styles.

    Why? Similar to modifiers, keeping the naming consistent helps reveal the relationship of these styles to the styles that override them in more adequate browsers.

    1. // bad
    2. {
    3.   muscles: {
    4.     display: 'flex',
    5.   },
    7.   muscles_sadBears: {
    8.     width: '100%',
    9.   },
    10. }
    12. // good
    13. {
    14.   muscles: {
    15.     display: 'flex',
    16.   },
    18.   muscles_fallback: {
    19.     width: '100%',
    20.   },
    21. }

  • Use a separate selector for sets of fallback styles.

    Why? Keeping fallback styles contained in a separate object clarifies their purpose, which improves readability.

    1. // bad
    2. {
    3.   muscles: {
    4.     display: 'flex',
    5.   },
    7.   left: {
    8.     flexGrow: 1,
    9.     display: 'inline-block',
    10.   },
    12.   right: {
    13.     display: 'inline-block',
    14.   },
    15. }
    17. // good
    18. {
    19.   muscles: {
    20.     display: 'flex',
    21.   },
    23.   left: {
    24.     flexGrow: 1,
    25.   },
    27.   left_fallback: {
    28.     display: 'inline-block',
    29.   },
    31.   right_fallback: {
    32.     display: 'inline-block',
    33.   },
    34. }

  • Use device-agnostic names (e.g. “small”, “medium”, and “large”) to name media query breakpoints.

    Why? Commonly used names like “phone”, “tablet”, and “desktop” do not match the characteristics of the devices in the real world. Using these names sets the wrong expectations.

    1. // bad
    2. const breakpoints = {
    3.   mobile: '@media (max-width: 639px)',
    4.   tablet: '@media (max-width: 1047px)',
    5.   desktop: '@media (min-width: 1048px)',
    6. };
    8. // good
    9. const breakpoints = {
    10.   small: '@media (max-width: 639px)',
    11.   medium: '@media (max-width: 1047px)',
    12.   large: '@media (min-width: 1048px)',
    13. };