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+
17+ Good:
18+
19+ ``` scss
20+ @use " foo" as * ;
21+ ```
222
323## Class naming convention
424
5- ## ` govuk ` namespacing
25+ ### ` govuk ` namespacing
626
727All class names start with a ` .govuk- ` namespace to reduce the likelihood of
828conflicting 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.
1131If you are building components for your own application or framework you should
1232use a different prefix, for example ` .app- ` or the initials of your department.
1333
14- ## Block Element Modifier (BEM)
34+ ### Block Element Modifier (BEM)
1535
1636GOV.UK Frontend uses the Block Element Modifier (BEM) methodology when naming
1737CSS classes. This is designed to help developers understand how the different
You can’t perform that action at this time.
0 commit comments