πŸ”– More Transparent UI Code with Namespace (archive)

CSS code should be transparent and self-documenting. Naming conventions like BEM help us see how components and its elements relate to each other. Namespaces give us a more global sense of the classes, in a non-relative way. Using namespaces gives us:

  • Clarity of what a class does and its scope
  • Confidence to know what changes will have side effects

These are the suggested namespaces:

  • o- for objects that are used a wide variety of contexts
  • c- for components which are a distinct part of the design
  • u- for utilities that are often used along side other classes
  • t- for themes (if your app has them)
  • s- for scopes that contain content coming from elsewhere (like a CMS)
  • is- or has- for states
  • _ for ugly hacks
  • js- for any DOM that has a JavaScript behavior on it
  • qa- for running automated tests or other test engineering requirements

Leave a Reply

Your email address will not be published. Required fields are marked *