33 lines
1.4 KiB
Markdown
33 lines
1.4 KiB
Markdown
---
|
|
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.
|