Skip to content

Silent classes as the main building block for both: utility-classes and component CSS Modules

With this I would like to initialise discussion on using silent-classes as the basis for everything-CSS in the product: both for utility-classes themselves and for components.

As a sneak-peak of the implementation proposed in the Epic, here is an example of converting .multi-file-commit-panel from IdeSidebar component:

Original ide.scss:

.multi-file-commit-panel {
  display: flex;
  position: relative;
  width: 340px;
  padding: 0;
  background-color: $gray-light;
  padding-right: 1px;
}

In the form of silent classes it might look something like this:

utility-classes.scss:

%d-flex { display: flex }
%p-relative { position: relative }
%w-column { width: $column-width }
%p-0 { padding: 0 }
%p-r-1 { padding-right: 1px }
%bg-gray-light { background-color: $gray-light }

common.scss:

@import utility-classes.scss;

.d-flex { @extend %d-flex }
.p-relative { @extend %p-relative }
.w-column { @extend %w-column }
.p-0 { @extend %p-0 }
.p-r-1 { @extend %p-r-1 }
.bg-gray-light { @extend %bg-gray-light }

Updated ide.scss (it can be our CSS Module now):

@import utility-classes.scss;

.multi-file-commit-panel {
  @extend %d-flex, %p-relative, %w-column, %p-0, %p-r-1, %bg-gray-light;
}

With this approach we get:

  • true SSOT for everything (silent classes),
  • it's easy to lint and warn user early on if any CSS definition is not based on silent-classes
  • we can build both: global stylesheets and component CSS Modules based on these

This way we have flexibility of building things with utility-only classes, while be able to import everything we need, into CSS Modules for our components and still keep SSOT.

NOTE: This solution still assumes that our components get access to utility-classes.scss(or whatever we decide to call our file with silent classes) that means gitlab-ui components can not be used outside of gitlab-ce/ee. But in this case, the only thing we need to supply in order to support this scenario is that utility-classes.scss and remember, silent classes are not present as CSS selectors in the build: they are silent and hence do not give any side-effect on the result build (in terms of performance or CSS bloat).

Decision (@timzallmann)

Approved: In combination with #2 (closed) - See also #2 (comment 188581995)

Edited by Tim Zallmann