Using and writing CSS

When to use and when to write

Base, defaults, resets

Mybring Design System CSS delivers a base CSS. That includes defaults for things like font-family and heading sizes, and a few resets to make things like box-sizing the same across browsers.

This means we avoid writing CSS for the body and html elements in our other repos. The two are handled by the design system because they affect the entire layout, not only what’s inside the given application.

Using CSS

With Mybring Design System CSS we can build interfaces using utilities and components before we write custom CSS. The declarations are intentionally minimal. The purpose is to provide:

• Tools to build consistent, accessible and responsive application interfaces that meet the users’ expectations in their environments.
• Simple, predictable and reliable CSS.
• Reusable and minimalistic components without the majority being exclusive for JS frameworks.
• Modern solutions to basic layout tasks with Flexbox utilities, but not complete layout and grid systems.

Writing CSS

Utilities and components are not enough; we must also write custom CSS. We typically write CSS for layout and when elements need to behave in certain ways in relation to each other. The nature of the Mybring interfaces require custom layouts, which is best done with custom CSS.

We can only use CSS to its fullest extent, including new features, when we write regular CSS. It’s what browsers use. It’s what the users get. It’s what we have to use when debugging. And it will outlast the instant technical debt of SASS, LESS, CSS-in-JS and contemporary frameworks.

We recommend using PostCSS or similar for shipping compatibility with new features.

Avoid CSS from dependencies

If a dependency has CSS you want to use, consider copying what you need into your own files. CSS as dependencies leaves much control in the hands of the dependency author.