Utility namespace

[ghost]

The naming conventions do not define how to use namespaces for utilities. I have seen u-<namespace>-<utilityName>, but at least for me a namespace should always be at the beginning: <namespace>-u-<utilityName>

[necolas]

There is no idea of including namespaced utilities (they all start with u-). Doesn't seem necessary.

[ghost]

I disagree. Utilities from different modules can otherwise conflict in the same way as components without namespaces. Why should there be a difference between the two?

[simonsmith]

I imagine that if you have have component specific utilities then those rules should exist in the component itself. Utilities are for common patterns that are used frequently across any number of components. Namespacing them doesn't really make sense in my experience

[ghost]

Well, as long as a utility name itself defines already the exact format like for example u-12pxDarkGray I agree. However, I would never use such a name and this does not apply for utilities like u-largeText (every module can define another font size) or u-lightText (every module can define another light text color) and so on. Therefore, I am still convinced that namespacing is necessary for utilities as well.

[simonsmith]

Classes like that are part of the theme, not utilities. Each component should have a set of custom properties (or variables) that hold configurable things like colors and font sizes etc and then use the theme.css and theme-map.css to configure say, three components to all use the same shade of gray.

Check SUIT theme for an example - https://github.com/suitcss/theme

[necolas]

Yeah you should be using utilities for styles that can work in any app. So theming like text styles is not suitable for utilities; you should use variables as Simon suggested. Utilities should also never be defined or changed from within a component.

[ghost]

Another example: The utility u-hidden could be implemented in different ways, for example with visibility: hidden or display: none or even clip (accessibly hiding content). All implementations will behave differently. Of course you can argue that one should be called u-invisible and so on, but if the modules are developed by different people, it will not work like that.