Styling components
Background:
In order to be able to make the move of CSS from gitlab-ce
into gitlab-ui
, the gitlab-ui-wg
has agreed we'd follow a hybrid approach between CSS modules and utility classes - most like bootstrap does.
New Pattern Proposal: Styling Components
For every component, we have on gitlab-ui
, create a correspondent CSS file and import it into the Vue file.
Advantages of new pattern
- Allows to be used by both HAML and Vue components
- 1 SSOT of CSS
- Eventually will lead us to less CSS
- Allows us to move into Shadow DOM if needed
Disadvantages of new pattern
- Still allows for CSS bleeding
- We need to make sure the styles will be available everywhere and won't be duplicated.
What is the impact on our existing codebase?
We need to make sure the styles will be available everywhere and won't be duplicated.
@timzallmann)
Decision (We move forward with the suggestion from @pgascouvaillancourt in #2 (comment 185734485) in combination with the setup that @mishunov suggested in #4 (closed).
Files structure like this:
.
├── components
│ └── base
│ ├── button
│ │ ├── button.scss
│ │ ├── button.stories.js
│ │ └── button.vue
│ └── popover
│ ├── popover.scss
│ ├── popover.stories.js
│ └── popover.vue
└── main.scss
Where each component's stylesheet would contain its "modularized" style:
// button.scss
.gl-button {
// style
@extend .some-utility-class;
}
And the main SCSS would import all components stylesheets:
// main.scss
@import 'components/base/button/button.scss';
@import 'components/base/popover/popover.scss';
This main bundle would be imported globally in Storybook and would have to be imported in CE/EE as well.
@import '@gitlab/ui/main.scss';
Related: