CSS Checklist

See Writing CSS for full documentation.

Responsive

• CSS written mobile-first
• In extremely wide viewports, the edges of backgrounds are not visible
• In extremely wide viewports, content is restricted to $max-width
• In narrow viewports, content stacks in a logical reading order
• Conditional content displays under correct conditions (logged in, out, Fx, not Fx)

Best Practices

• Passes Stylelint
• Components added locally do NOT use mzp prefix on classes
  • Can still use other prefix conventions
• Prefer classes over element selectors or IDs
• Use mixins and design tokens when available
• No commented out code

Localization

• Test in an RTL language (You may find the Pseudolocalize addon helpful.)
• BIDI mixin used for any properties which include left or right
• BIDI mixin used for any values which include left or right
• BIDI mixin used for any properties which assume LTR (e.g. background-position, shorthands like border-width)