SUIT CSS is a methodology focused on improving the CSS authoring experience for component-based development.
A component-based system allows for the implementation and composition of loosely coupled, independent units into well-defined composite objects. Components are encapsulated but are able to interoperate via interfaces/events.
Each component should have a single focus and contain everything necessary to realise a specific part of the UI. Components may contain HTML, CSS, JavaScript, and associated assets without making assumptions about the outer rendering context.
The functionality and presentation defined by a component must be semantically related. Components do not have direct influence over each other.
Composability is concerned with the inter-relationships of components. Composable systems have components that can be assembled in various combinations, as required.
Configuration is done via interfaces that are provided and used by components.
Components should not directly modify the presentation or behaviour of their dependencies. Relying on interfaces and events for inter-component communication results in a loose coupling.
Attempting to reuse too much code across components can increase their coupling. Isolation is more important than avoiding the repetition of superficially similar code.
The implementation of a component should not be exposed to other components. For example: your component should not leak styles into the HTML tree fragments of other components; a component's HTML should not be directly included in the HTML for another component.
Complexity is a significant problem for large, adaptive applications. The more you can reduce the entanglement of your components, the easier it is to reason about the system.
Write small, independent components that are well documented to describe how the components should be used, and why specific CSS properties are needed in the implementation. Do not assume that CSS is self-documenting.