bemit-cheat-sheet.md

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