Using and writing CSS

When to use and when to write

Base, defaults, resets and standards

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. It is handled by the design system because it affects the entire layout, not only what’s inside the given application.

Mybring relies heavily on browser defaults and frontend standards. This is to enable us to write less code and offer better accessibility. The more we can base upon defaults and standards, the less likely we are to pile on implications from our own reinvented flavour of everything – or “unngå at det baller på seg”, as we say in Norwegian.

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.