Refactor setup documentation

docs/routes/usage/css.md

@@ -0,0 +1,32 @@
+---
+title: Writing CSS
+---
+
+## Conventions
+
+### Avoid inconsistent CSS units
+
+Prefer using `rem` units, using only whole and half units, eg. `2rem` or `1.5rem`. If you need a specific pixel (`px`) measurement, use `px` and add comment explaining why you used it. The one exception is that `0.25rem` is allowed.
+
+> Using `rem` units lets you change the scale of the UI by simply changing the body font size.
+
+### Always use `HSL` colors
+
+### All colors should be theme variables
+
+## Abilities
+
+Omorphia leverages PostCSS to allow you to write in future-standards-compliant CSS. Browse [the CSSWG drafts](https://cssdb.org/) to see what is possible (not including stage 0).
+
+Notable features:
+
+- [Nesting](https://www.w3.org/TR/css-nesting-1/#example-aecb8796)
+- [Gap](https://developer.mozilla.org/en-US/docs/Web/CSS/gap)
+- [`clamp` function](<https://developer.mozilla.org/en-US/docs/Web/CSS/clamp()>)
+- [Custom Media Queries](https://www.w3.org/TR/mediaqueries-5/#example-532b0adb)
+- [`:has()`](https://developer.mozilla.org/en-US/docs/Web/CSS/:has)
+- [place-content](https://developer.mozilla.org/en-US/docs/Web/CSS/place-content)
+
+## Styles
+
+Conform to [BEM styling](http://getbem.com/introduction/) wherever possible. When working in components, you may want to leverage [Svelte's conditional class shorthand](https://svelte.dev/tutorial/class-shorthand) instead of BEM's modifier class name format.