CSS

How do I add a CSS file?

There are four types of CSS files in this project:

• Page stylesheets - There's one of these per page; they live next to the page's .jsx file and share the same name.
• Component stylesheets - There's one of these per component; they live next to the component's .jsx file and share the same name.
• gu-sass stylesheets - These contain exclusively SCSS functions and mixins, to be used in either of the other types of stylesheets described above.
• skeleton stylesheets - These contain CSS generic to the entire site, e.g. accessibility, resets, basic html etc.

To add a new stylesheet to the project simply create the file and then import it into your page or component. Webpack will resolve this and add it to a CSS file named after your bundle's entry point.

Example

📄 myComponent.jsx

import React from 'react';
import './myComponent.scss'; /*looks weird at first*/

Coding conventions

Currently in support-frontend there are two types of components.

Shared component: Components that are used in more than one page, they are located inside the global components folder. These should only contain rules which are context-independent. For instance, font sizes, colours, padding (since it's internal), margins of child elements. But margin on the parent, for example, should probably be avoided, because it's presupposing that it will be used in a particular place. This kind of positional styling should happen in the page-level CSS.

Non-shared component: Components specific to a page which are not used outside that page. Typically located inside the components folder of a certain page.

Use layout constants & fontsets

Inside gu-sass/layout.scss here you'll find shared variables for sizing and spacing. You should be able to derive most metrics from these. This lets the next person understand where a number is coming from and what it aligns to:

//🙀 bad
.component-button {
  padding: 6px 12px;
}

//✅ better
.component-button {
  padding: $gu-v-spacing/2 $gu-h-spacing/4;
}

In the same manner, gu-sass/typography.scss contains several mixins for fonts based on their ise (body, headline, info). Always prefer these to rolling your own. If a design contains a font combo that's very similar to an existing fontset but not quite, consult about reusing the same fontset rather than overriding it.

//🙀 bad
.component-button {
  font-family: $gu-text-sans-web;
  font-size: 17px;
  line-height: 20px;
  font-weight: 700;
}

//✅ better
.component-button {
  @include gu-fontset-body-sans;
  font-weight: 700;
}

Apply style only via CSS classes

The classes should follow the BEM convention system. The shared components should have the component prefix in their class names.

//🙀 bad
#double-heading {
  @include gu-fontset-body-sans;
}
h2 {
  color: gu-colour(neutral-1);
}

//✅ better
.component-double-heading {
  @include gu-fontset-body-sans;
}
.component-double-heading__subheading {
  color: gu-colour(neutral-1);
}

No nesting

Nesting should be avoided. The only case where it is justified is inside a CSS file of a page, where we nest the entire style of a page inside the page's id to avoid conflicts with other pages' rules.

//🙀 bad
.component-button {
  background: gu-colour(highlight-main);
  .component-button__text {
    @include gu-fontset-body-sans;
  }
}

//✅ better
.component-button {
  background: gu-colour(highlight-main);
}
.component-button__text {
  @include gu-fontset-body-sans;
}

Exception: Page Nesting

The .scss file of examplePage will have the following shape:

#example-page {
  .component-example-component{
    // Specific rules for a shared component in this specific page
  }
}

Avoid overriding shared components CSS properties

When adding a shared component into a page, sometimes you need add extra CSS rules for that component. Those rules should be put inside the CSS file of a page. Additionally, you shouldn't override any rule from the shared component.

If you find yourself overriding a lot of CSS rules, that is an indicator that you should either:

• Add a new prop to the component itself to define and style that appearance.
• Move those rules out of the component altogether and place them inside the page specific file.

As an example, a shared component which will have a different position (determined via margin-right) in each page, should not have a margin-right value in the shared component's css file but inside each specific page.

Full Example

As an example consider the following CSS for a shared component called DoubleHeading.

.component-double-heading {
  color: gu-colour(brightness-7);
}

.component-double-heading__heading {
  @include gu-fontset-headline;
}

.component-double-heading__subheading {
  @include gu-fontset-body-sans;
  color: gu-colour(brightness-20);
  @include mq($from: phablet) {
    text-transform: uppercase;
  }
}

Note that we avoid nesting, we use a BEM approach and we prefix the classes with component.