As part of reducing our CSS, we need to migrate CSS rules from SCSS files to utility classes. Utility classes should be used inline in HAML or Vue files. Use our utility classes reference to find equivalent replacements or combinations: https://unpkg.com/browse/@gitlab/ui@latest/src/scss/utilities.scss Here is an example MR for contributors to get an idea of the type of change this may involve. This is a particularly big one but don't let it spook you :ghost: : https://gitlab.com/gitlab-org/gitlab/-/merge_requests/95026 ### Performance impact We would expect to see performances improvements as we reduce the size of our CSS files. Here are some statistics we track in terms of CSS rules: https://gitlab-org.gitlab.io/frontend/gitlab-css-statistics/ Here is a summary as of the 2nd of August, before we start working on this project:  Update as of the 2nd of April 2024:  ## Some things to keep in mind - The below issues don't have to be tackled in one MR. The work can be split into multiple MRs, done by different contributors if necessary. Any progress is good so don't feel overwhelmed by migrating big files. Just split the work! - Not everything is listed below. The listed rules and occurrences highlight the most common and obvious rules. - Keep in mind the utility classes which are combination of multiple rules (such as `gl-px-0` which set padding left and right to 0) and consider such optimisations. - The migration to the equivalent utility class is not a blanket rule! Each case should be assessed to ensure the rule is required. If not it should be deleted instead of migrated (`background: transparent` is a good example of a rule that can often be deleted). - Some may need to be replaced with responsive rules if present in media queries (such as `gl-sm-display-none`) - If you run into unused rules, delete them! ### Display rules | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | display: block -> `gl-display-block` | 245 | | display: inline -> `gl-display-inline` | 24 | | display: inline-block -> `gl-display-inline-block` | 155 | | display: inline-flex -> `gl-display-inline-flex` | 23 | | display: flex -> `gl-display-flex` | 309 | | display: none -> `gl-display-none` | 296 | | display: table -> `gl-display-table` | 2 | | display: table-cell -> `gl-display-table-cell` | 4 | | display: grid -> `gl-display-grid` | 9 | ### Position rules | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | position: relative -> `gl-relative` | 217 | | position: absolute -> `gl-absolute` | 185 | | position: static -> `gl-static` | 21 | | position: fixed -> `gl-fixed` | 31 | | position: sticky -> `gl-sticky` | 13 | | float: left -> `gl-float-left` | 56 | | float: right -> `gl-float-right` | 56 | | vertical-align: middle -> `gl-vertical-align-middle` | 63 | | vertical-align: baseline -> `gl-vertical-align-baseline` | 20 | | vertical-align: top -> `gl-vertical-align-top` | 27 | | vertical-align: bottom -> `gl-vertical-align-bottom` | 3 | ### Sizing rules | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | width: auto -> `gl-w-auto` | 54 | | height: auto -> `gl-w-height` | 33 | | max-width: none -> `gl-max-w-none` | 12 | | max-height: none -> `gl-max-h-none` | 7 | | max-width: 100% -> `gl-max-w-full` | 35 | | max-height: 100% -> `gl-max-h-full` | 8 | ### Flex related rules | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | align-items: center -> `gl-align-items-center` | 150 | | align-items: flex-start -> `gl-align-items-flex-start` | 14 | | align-items: flex-end -> `gl-align-items-flex-end` | 3 | | align-items: baseline -> `gl-align-items-flex-end` | 1 | | flex-wrap: wrap -> `gl-flex-wrap` | 50 | | flex-wrap: nowrap -> `gl-flex-nowrap` | 17 | | flex-direction: column -> `gl-flex-direction-column` | 44 | | flex-direction: column-reverse -> `gl-flex-direction-column-reverse` | 2 | | flex-direction: row -> `gl-flex-direction-row` | 16 | | flex-direction: row-reverse -> `gl-flex-direction-row-reverse` | 1 | | flex-shrink: 0 -> `gl-flex-shrink-0` | 24 | | flex-shrink: 1 -> `gl-flex-shrink-1` | 5 | | flex-grow: 0 -> `gl-flex-grow-0` | 2 | | flex-grow: 1 -> `gl-flex-grow-1` | 25 | | justify-content: center -> `gl-justify-content-center` | 41 | | justify-content: space-between -> `gl-justify-content-space-between` | 34 | | justify-content: flex-start -> `gl-justify-content-start` | 10 | | align-self: center -> `gl-align-self-center` | 18 | ### Spacing rules | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | padding: 0 -> `gl-p-0` | 327 | | padding-right: 0 -> `gl-pr-0` | 72 | | padding-left: 0 -> `gl-pl-0` | 54 | | padding-top: 0 -> `gl-pt-0` | 30 | | padding-bottom: 0 -> `gl-pb-0` | 32 | | margin: 0 -> `gl-m-0` | 172 | | margin-top: 0 -> `gl-mt-0` | 60 | | margin-bottom: 0 -> `gl-mb-0` | 106 | | margin-left: 0 -> `gl-ml-0` | 48 | | margin-right: 0 -> `gl-mr-0` | 74 | | margin-left: auto -> `gl-ml-auto` | 33 | | margin-right: auto -> `gr-ml-auto` | 19 | ### Background rules | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | background: none -> `gl-bg-none` | 28 | | background-color: transparent -> `gl-bg-transparent` | 73 | | background-color: $white -> `gl-bg-white` | 71 | | background-color: #fff -> `gl-bg-white` | 49 | | background-color: inherit -> `gl-reset-bg` | 11 | | background-color: $gray-(value) -> `gl-bg-gray-(value)` | 88 | | background-color: $blue-(value) -> `gl-bg-blue-(value)` | 16 | | background-color: $green-(value) -> `gl-bg-green-(value)` | 12 | | background-color: $orange-(value) -> `gl-bg-orange-(value)` | 21 | | background-color: $purple-(value) -> `gl-bg-purple-(value)` | 4 | | background-color: $red-(value) -> `gl-bg-red-(value)` | 12 | ### Text formatting rules | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | color: inherit -> `gl-reset-color` | 52 | | color: $white -> `gl-text-white` | 84 | | color: $gl-text-secondary -> `gl-text-secondary` | 56 | | text-align: center -> `gl-text-center` | 90 | | text-align: right -> `gl-text-right` | 35 | | text-align: left -> `gl-text-left` | 54 | | text-decoration: none -> `gl-text-decoration-none` | 93 | | text-decoration: underline -> `gl-text-decoration-underline` | 38 | | text-overflow: ellipsis -> `gl-text-overflow-ellipsis` | 47 | | white-space: nowrap -> `gl-white-space-nowrap` | 117 | | white-space: normal -> `gl-white-space-normal` | 23 | | white-space: pre-wrap -> `gl-white-space-pre-wrap` | 19 | ### Opacity | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | opacity: 0 -> `gl-opacity-0` | 72 | | opacity: 0.(value) -> `gl-opacity-(value)` | 40 | | opacity: 1 -> `gl-opacity-10` | 49 | ### Overflow | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | overflow: hidden -> `gl-overflow-hidden` | 149 | | overflow-x: auto -> `gl-overflow-x-auto` | 17 | | overflow-y: auto -> `gl-overflow-y-auto` | 19 | | overflow-x: hidden -> `gl-overflow-x-hidden` | 21 | | overflow: auto -> `gl-overflow-auto` | 23 | | overflow: visible -> `gl-overflow-visible` | 17 | ### Misc rules | Rule and class | Occurrences (As of July 2022) | | ------ | ------ | | content: '' -> `gl-content-empty` | 72 | | cursor: default -> `gl-cursor-default` | 33 | | cursor: pointer -> `gl-cursor-pointer` | 82 | | outline: 0 -> `gl-outline-0` | 41 | | outline: none -> `gl-outline-none` | 57 | | pointer-events: none -> `gl-pointer-events-none` | 39 | | fill: currentColor -> `gl-fill-current-color` | 24 | | z-index: 1 -> `gl-z-index-1` | 26 |