Components

Components are the building blocks of our web pages. They are modifiable and reusable elements that can also nest within each other to create more complex and functional components.

How do we use them

In the vast majority of projects, components come pre-built from our global components library. Design uses them to create interfaces, and development applies them according to each project’s design system.

However, there are always components that need to be created from scratch, such as the header, footer, or those made ad hoc in the design without using the mentioned library (cards, links, wrappers…).

For these custom developments, it is essential to follow a set of best practices that make the construction more solid and uniform.

Good practices

Reserved words

We have an internal doc with naming convetion for components and its modifers and elements. Please, feel free to contribute ideas and improvements, it’s always evolving.

Extend

The SCSS @extend property allows one selector to inherit the styles of another, helping you avoid code duplication.

Why is it great for performance?

• Reduced CSS Size: By using @extend, SCSS combines selectors that share the same styles into a single rule. This reduces the number of individual CSS rules generated, minimizing the overall CSS file size.

• Improved Maintainability: It simplifies your code by avoiding repetitive styles. You write the shared styles once and extend them where needed, making the code easier to manage.

• Faster Page Load: A smaller CSS file leads to faster download and parsing by the browser, which can contribute to better page performance.

In short, @extend enhances performance by optimizing your CSS structure and reducing redundancy. However, it should be used carefully, as overusing it with complex selectors can sometimes lead to unintended CSS bloat. If you’re using @extend for breakpoints, organize them visually or add a comment to clarify their functionality.

NOTE!

Keep in mind that with the available foundations and utilities, many of the rules we commonly use in the CSS of each component—such as margin, padding, color, fonts, display, position—can be extended.

.c--card-a {
    @extend .u--display-flex;
    @extend .u--display-tablets-block;
    @extend .u--flex-direction-column;
    @extend .f--gap-c;
    @extend .u--width-100;
    padding: $measure*5 $measure*3;
    @extend .f--sp-c;
    &__title {
        @extend .f--font-e;
        @extend .f--color-a;
        @extend .u--text-center;
        @extend .u--text-tablets-left;
    }
    &__wrapper {
        @extend .u--display-flex;
        @extend .u--flex-direction-column;
        @extend .f--gap-c;
        &__title {
            @extend .f--font-f;
            @extend .f--color-c;
            @extend .u--font-bold;
        }
        &__subtitle {
            @extend .f--font-g;
            @extend .f--color-c;
        }
    }
}