[Systems & Namespace] Css architecture for design systems

This page displays take away information I have saved from articles read focused on design systems and namespaces methods. I use this as a reference point for research in the design systems and namespaces category.

Take Away:

Establish css principles.

Make it modular.
– The design system is modular in every way, which very much applies to the way CSS is written. There should be clear separation between components.

Legibility is key.
– Developers should be able to understand CSS code at a glance and understand the purpose of any given selector.

Clarity trumps succinctness
– The design system may sometimes seem verbose, but it delivers clarity and reslience in exchange. Keeping CSS legible and scalable means sacrificing a shorter syntax.

Keep things flat
– Long selector strings should be avoided wherever possible in order to keep CSS as DOM-independent and modular as possible.

Avoid conflicts
– Since components will be deployed to many different applications, it’s critical to ensure that the design system’s CSS doesn’t conflict with other libraries and systems. This is accomplished by the system’s namespacing of class names, described in more detail below.

Global namespace.
- All classes associated with the design system are prefixed with a global namespace, which is the Company Name followed by a hyphen.

Class prefixes
- In addition to a global namespace, we added prefixes to each class to make it more apparent what job that class is doing. 

c - for UI components, such as .cn-c-card or .cn-c-header
l - for layout-related styles, such as .cn-l-grid__item or .cn-l--two-column
u - for utilities, such as .cn-u-margin-bottom-double or .cn-u-margin-bottom-double
is - and has- for specific states, such as .cn-is-active or .cn-is-disabled. These state-based classes would apply to
js - for targeting JavaScript-specific functionality, such as .js-modal-trigger. No styles are bound to these classes; they’re reserved for behavior only. For most cases, these js- classes would toggle state-based classes to an element.