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).
@timzallmann)
Decision (Approved: In combination with #2 (closed) - See also #2 (comment 188581995)