Skip to main content

The GDS Way and its content is intended for internal use by the GDS and CO CDIO communities.

CSS coding style



Your project should conform to GDS CSS/Sass linting rules, these are published as a stylelint configuration: stylint-config-gds.


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 5px.

Include fallbacks for rem spacing

Avoid using rem units for spacing.

If you are using the GOV.UK Design System without compatibility mode turned on, it will use rem units for font sizing with pixel fallback.

This allows users to increase the size of the text on a page by adjusting the font size in their browser settings.

If you do need to use rem units, include a fallback for browsers that do not support rem units.

font-size: 12px;
font-size: 1.2rem; /* This line is ignored by older browsers */

Using rem units with deprecated libraries

You should avoid using rem units with GOV.UK Template.

Since GOV.UK Template sets the font size at the root level, sizing with rem can be unpredicatable.

Vendor prefixing

When using CSS features which require vendor prefixes use autoprefixer.

You should configure autoprefixer to target our supported browsers.

Sass nesting

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.

Exceptions to this include pseudo selectors and JavaScript enabled classes.

.accordion {
  // styles when the accordion is not enhanced here
.js-enabled {
  .accordion {
    // styles when the accordion is enhanced here

    &:focus {
      // ...
This page was last reviewed on 25 November 2020. It needs to be reviewed again on 25 November 2021 by the page owner #gds-way .
This page was set to be reviewed before 25 November 2021 by the page owner #gds-way. This might mean the content is out of date.