Turbo CSS supports namespacing. Upon creating a compiler instance, you can specify a CSS namespace which will be used to prefix all utility class names.
For example, using the NS- namespace with the following expression:
will result in:
and the following CSS will be generated:
Typically, using a CSS framework starts with injecting a global CSS reset. As each framework has its own custom reset so you can't mix multiple CSS frameworks within the same page. This also means that you will have a hard time mixing 3rd party components into yours.
The Turbo CSS reset is different. First of all, the Turbo CSS base styles are scoped, which means they don't bluntly target the entire page.
There are two fundamentally different kinds of CSS properties and Turbo handles them differently, so let's look at each of them one at a time.
There are some styles that are naturally expected to inherit, like the font-family, color and font-size properties. For example, in a large body of text, if you set a word to be bold, you don't want the color and all the other properties to be reset. You just want to change it's boldness relative to its surrounding.
Most (all?) CSS frameworks set these inheriting styles on the html element. As Turbo may be used on both the entire page or on specific components only, you have to manually specify which element to apply these inheriting styles to by adding the t1-start class to it. You can also add the t1-start class to multiple elements if you want to reset any inheriting properties, for example when shielding a component from external pollution.
The other group of CSS properties are not inheriting by default. Such is the display property, the border and background colors.
Again, all CSS frameworks I'm aware of use a global CSS reset for non-inheriting styles. In Turbo, you apply the CSS reset to each element individually by adding the t1 class to them. This means that you will have to add the t1 class to literally every element. In certain cases, this may not be possible or desirable, so you can also use the t1-all class on an element to apply the non-inheriting Turbo CSS base styles to every element in its subtree. You should only use this approach if Turbo CSS is to control the design of the entire subtree.
Note that t1-all does not apply the CSS reset to the current element, only its subtree, so you may want to use it together with the t1 class.
Thus, dropping the Turbo CSS base styles into an existing project will have zero side-effects. (Assuming the t1, t1-start and t1-all classes are not used.)