In the Classes chapter, we briefly explained the concept of using namespacing to avoid conflicts between stylesheets.
In this chapter, we'll dive deeper to see how other symbols in CSS can be rendered safe to use, and how namespacing can be controlled.
We've only mentioned classes up to this point, but in CSS, there are many other symbols that share the same naming context, therefore requiring namespacing to avoid potential conflicts.
Symbols that Stylable namespaces:
Stylable does not namespace
attribute, or other symbols at the moment, but may add additional symbol namespacing support in the future.
In some cases, we might want to avoid namespacing for a specific symbol.
- To style a third-party component that is using pre-determined global class names.
- To expose a persistent, globally-namespaced API for non-Stylable consumers that are using our project.
Disable in selector
To avoid namespacing on classes in a selector, wrap those classes with a
/* OUTPUT */
Classes used within the
Defining global symbols
We can avoid namespacing for all symbols (except classes) by using the
@property st-global(--bgColor)- read more
@keyframes st-global(slide)- read more
@layer st-global(theme)- read more
container: st-global(panel)- read more
Unlike the other symbols that are mapped from a local name to their global one, when we map a class using
-st-global, we can define a global selector that will replace it.
Notice that in this case, we are mapping our
player class to a
.myGame__player class selector. This is because classes can be mapped to any selector, including multiple classes, elements, attributes, and other CSS selector parts.
Stylesheet level namespacing
By default, namespacing is derived in Stylable using the stylesheet filename, but in some edge cases we might want to override this behavior.
To do so, we can use the
@st-namespace 'OverrideNamespace'; definition. Click here to read more about the namespace API.
Project level namespacing
On a more general level, we can have granular control of Stylable's namespacing process by passing a custom namespace resolver to Stylable at initialization using configuration.