src directoryGOV.UK Frontend is broken into a number of layers in order to help provide a logical structure, loosely following the conventions of ITCSS.
Each folder has its own entry point (_index.scss).
Global variables for the project, for example colour palettes and spacing and typography scales.
This layer should not output any CSS.
Mixins or functions that implement either logic (e.g. conditionally outputting CSS) or calculations, and that need to be made available globally.
This layer should not output any CSS.
Mixins that abstract common styling (for example, focus states or visually hidden content)
This layer should not output any CSS.
Basic content styles for typography, links etc. The classes defined in this layer would generally correspond to an HTML element - for example paragraphs, headings, lists or links.
Objects can range from something as simple as a wrapper element, to layout systems.
They may be used in any number of unrelated contexts to the one you can currently see it in. This means that making modifications to these types of class could potentially have knock-on effects in other places.
Discrete pieces of UI. In most cases these will map to the components in the Design System.
Utility classes – for example clearing floats, visually hiding content.
Classes that map to a specific property – for example margin or font weight - and override all other layers. Rules in this layer will generally be marked as !important.
Class names within this layer use an additional prefix -!-, for example
.govuk-!-font-width-regular.
If a class only overrides when a condition is met, the condition will be at the end of the class name. For example .govuk-!-display-none-print will only override with display: none in a print layout.