prtksxna — is chopping onions

🔖 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