How to deal with duplicate style classes

Overview

This guideline will expand on the bootstrap method of Standardized Components that were already set in place. The method we are currently using was implemented by creating a reusable styling component, such as _buttons.scss, that is dedicated to one specific folder and can be applied to multiple pages rather than being limited to one page and found in many. This prevents the unnecessary duplication of having to recreate buttons for every single page and have it limited for that one specific page.

As you may guess, duplication can create formatting inconsistencies, may impact our project performances, and can makes it difficult for any type of code referencing. This is why we are encouraging developers to assist in fixing duplications they find while working on their assigned issues.

Below you will find the a step by step guide that will explain where to find the location of these components, how to create one, and how to use them as well.

---

Begin by checking the elements folder to see if the styling component was already created.

• You can find the element folder via this path: _sass > components > elements

• If the component you need is already in the elements folder, then jump down to How to use a styling component

---

Creating a reusable component

Consider creating a reusable component if you've found a duplicate style while working on an issue and it is NOT in the elements folder.

1. First, refer to the Figma design to stay consistent with our site principles.

2. Once you understand the design format, begin by creating a new file under the elements folder.

   • Right click on the elements folder and select 'New File'
   

3. Name your file using the format already in place.

   • Please stay consist with the naming principles like the ones displayed here. _button.scss, _color-styles.scss, etc.

4. After successfully creating your file, begin to create your reusable component.

   • Please make sure to leave detailed comments describing the styling features you create.

   • Style names must follow:

     • Base Class -- should be used for every instance of the components styles and must generally describe the component. (ex: .btn is for buttons, .page-card is for page cards)

     • Size Class -- should be added for every instance where the size of the component is changed. Typically includes sm, md, lg, and xl. (ex: .btn-lg, .page-card-xl)

     • Color Class -- should be added on for every instance where the color of the component is changed. (ex: .btn-primary, .page-card-secondary)

     • Page-specific Class -- Any feature related to the component that is specific to a page. (ex: .btn--about-us)

Your code should look something similar to the image below.

5. Once you've successfully created your styles, you may begin using them in your HTML.
   • To use the component created, simply include the name of the style needed in your class. See How to use a styling component.

---

How to use a styling component

Using a style is fairly simple and takes after the bootstrap model. Some styles may not need a size, color, or page specific class and can be simply removed from the code. For an example, see below.

Base Class (page-card) - sets our page-card component.

Color Class (card-primary) - sets our page-card component color to primary (white page card).

Size Class (page-card-lg) - sets our page-card component size to large.

Page-specific Class (page-card--project-description-page) - used for a specific page page-card component.

• Again, please refer to the Figma design to determine what must be used. Some may have sizing, colors, etc and some may not.