Formalize functional CSS approach and cleanup `common.scss`

(Identified in https://gitlab.com/gitlab-org/gitlab-ce/merge_requests/24141#note_128953907)

Description

Lately, functional classes have been added to common.scss on an as-needed basis. Let's formalize how these classes should be created and cleanup the existing ones in common.scss.

Questions

  • What about functional classes that are needed but have low reusability (i.e. mw-6em)?

What can we do?

  • Let's move functional classes out of common.scss to functional.scss and include a comment with instructions to add new classes.
  • Let's create sections in functional.scss for related functional classes (i.e., sizing, spacing, border, etc.).

/cc @kushalpandya

Edited by Paul Slaughter