CSS coding style
Use soft tabs with a 2 space indent. This follows the conventions we use in our other projects.
You should use the GOV.UK Design System spacing scale.
Use with deprecated libraries
If your project is not using the GOV.UK Design System, you should use pixel values in multiples of
rem units strategically
As a general rule, per Josh W. Comeau’s The Surprising Truth About Pixels and Accessibility:
When picking between pixels and rems, here’s the question you should be asking yourself: Should this value scale up as the user increases their browser’s default font size?
rem units for
font-size wherever possible.
You should generally avoid using
rem for padding or border-width if these are likely to cause layout or readability issues when the font-size increases.
When using CSS features which require vendor prefixes use autoprefixer.
Sass nesting should be avoided where possible.
Over use of nesting can make searching for selectors difficult and can hide complicated CSS that should be simplified.
// styles when the accordion is not enhanced here
// styles when the accordion is enhanced here