File tree Expand file tree Collapse file tree
docs/contributing/coding-standards Expand file tree Collapse file tree Original file line number Diff line number Diff line change 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+ .bar {
17+ color : foo .govuk-function (" baz" )
18+ }
19+ ```
20+
21+ Good:
22+
23+ ``` scss
24+ @use " foo" as * ;
25+
26+ .bar {
27+ color : govuk-function (" baz" )
28+ }
29+ ```
230
331## Class naming convention
432
5- ## ` govuk ` namespacing
33+ ### ` govuk ` namespacing
634
735All class names start with a ` .govuk- ` namespace to reduce the likelihood of
836conflicting with existing classes in your application. It also helps to identify
@@ -11,7 +39,7 @@ where the styling for a particular element is coming from.
1139If you are building components for your own application or framework you should
1240use a different prefix, for example ` .app- ` or the initials of your department.
1341
14- ## Block Element Modifier (BEM)
42+ ### Block Element Modifier (BEM)
1543
1644GOV.UK Frontend uses the Block Element Modifier (BEM) methodology when naming
1745CSS classes. This is designed to help developers understand how the different
You can’t perform that action at this time.
0 commit comments