CSS Rules Draft

README.md

CSS Rules for Harmonious Living

Sizing

• Prefer to use em/rem rather than px
  • rem is the browser's default size - usually equal to 16px
  • em is relative to it's parent's sizing
• Consider which sizing makes most sense - should the sizing increase if the parent's increases (em) or should it remain constant (rem).

Colours

• Always move colours into a separate file and reference through CSS variables var()
• Colour pallette should be declared in :root
• When an element may take colours from other classes, declare colour variables at the top of the element's class

    .element {
      --color: yellow;
      --background-color: black;
      color: var(--color);
      background-color: black;
    }

  This will allow for modifier classes to change the colours where applicable

    .element--inverted {
      --color: black;
      --background-color: yellow;
    }

Naming

Naming is hard

• Use BEM methodology
  • Block .navigation
  • Element .navigation__list
  • Modifier .navigation__list--dark
• Avoid tageting HTML tags

    .navigation {
      ul {
      }
    }

Nesting (SCSS)

• Avoid nesting where possible
• Nesting is useful for adding modifier classes.

    .navigation__list {
      &--dark {
      }
    }

Logical Properties

• Use margin-inline-end: 1em; rather than margin-right: 1em; to help with right-to-left languages

Pointers

• Keep block styles in separate files
• Identify reusable patterns early
• Style and build generically
• Reuse where possible