Skip to content

Commit 587b683

Browse files
committed
Add sass modules section to style guide
1 parent 003e113 commit 587b683

1 file changed

Lines changed: 23 additions & 3 deletions

File tree

  • docs/contributing/coding-standards

docs/contributing/coding-standards/css.md

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,28 @@
1-
# CSS Style Guide
1+
# CSS and Sass Style Guide
2+
3+
## Sass modules
4+
5+
GOV.UK Frontend supports both `@import` and `@use` to include Sass files.
6+
7+
Our public API is prefixed with `govuk-` to ensure consistent naming and avoid
8+
clashes with Sass elements in your application. You should `@use` govuk-frontend
9+
modules without a namespace:
10+
11+
Bad:
12+
13+
```scss
14+
@use "foo";
15+
```
16+
17+
Good:
18+
19+
```scss
20+
@use "foo" as *;
21+
```
222

323
## Class naming convention
424

5-
## `govuk` namespacing
25+
### `govuk` namespacing
626

727
All class names start with a `.govuk-` namespace to reduce the likelihood of
828
conflicting with existing classes in your application. It also helps to identify
@@ -11,7 +31,7 @@ where the styling for a particular element is coming from.
1131
If you are building components for your own application or framework you should
1232
use a different prefix, for example `.app-` or the initials of your department.
1333

14-
## Block Element Modifier (BEM)
34+
### Block Element Modifier (BEM)
1535

1636
GOV.UK Frontend uses the Block Element Modifier (BEM) methodology when naming
1737
CSS classes. This is designed to help developers understand how the different

0 commit comments

Comments
 (0)