Skip to content

Instantly share code, notes, and snippets.

@simevidas
Last active July 19, 2019 12:14
Show Gist options
  • Save simevidas/8a12ce2b2f426cf842df to your computer and use it in GitHub Desktop.
Save simevidas/8a12ce2b2f426cf842df to your computer and use it in GitHub Desktop.

BEM with namespaces cheat sheet

  • o-, Object
    • abstrct; may be used in any number of (unrelated) places across the project
    • modifications have knock-on effects in a lot of other unrelated places
    • for “abstracting out the repetitive, shared, and purely structural aspects of a UI into reusable objects”
    • layout, wrappers, containers and other “skeletal aspects” of UI components
  • c-, Component
    • a concrete, implementation-specific piece of UI
    • modifications are detectable in the context you’re currently looking at
  • u-, Utility
    • single responsibility rules which have a very specific and targeted task
    • they commonly carry !important to ensure enforcement
    • “they are only one step away from inline styles, so should be used sparingly”
    • “utilities should be defined once, and never need changing”
  • t-, Theme
    • responsible for adding a theme to a view
  • s-, Scope
    • class creates a new styling context
  • is- and has-, State
    • a temporary, optional, or short-lived style due to a certain state being invoked
  • _
    • a hack
  • js-
    • signifies that the DOM element has some behaviour acting upon it
    • “we should never have styling and behaviour bound to the same hooks”
  • qa-
    • hooks for automated UI tests
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment