I have created a document to set a standard for writing CSS code at Heybooster. I also wanted to share this documentation as open source.

  • We use SCSS as CSS Preprocessing.
  • Our CSS architecture is generally based on the BEM. methodology. However, in some cases, we may be able to use OOCSS or SMACSS as alternative solutions.
  • We create and use utility classes for frequently used css properties.
  • We write component-scoped CSS . Thus , Our SCSS/CSS codes will apply to elements of the current components only.
<style lang="scss" scoped>
.insight {
  position: relative;
  display: grid;
  align-items: center;
  grid-template-columns: .1fr 2.5fr .4fr 1.5fr 0.5fr; // total=>5 units
  gap: 10px;
  font-family: "Avenir-Next", Arial, Helvetica, sans-serif;

  &__title {
    color: $nileBlue;
    font-size: clamp(13px, 2.5vw, 18px);
    font-weight: $regular;
    padding-right: clamp(10px, 2.5vw, 20px);
    cursor: pointer;
    white-space: nowrap;
  }

  &__bookmark-status {
    cursor: pointer;
    max-height: clamp(15px, 2.5vw, 18px);
  }

  &__department {
    color: $darkCyan;
    font-size: clamp(13px, 2.5vw, 18px);
    font-weight: $regular;
    font-style: italic;
    cursor: pointer;
    white-space: nowrap;
  }

  &__in-progress {
    cursor: pointer;
  }
}
</style>

Class Naming Rules

For naming rules, we used the following resources:


We usually follow the BEM methodology to naming the template classes:

class-name { }
class-name--modifier-name { }
class-name__child-element { }
class-name__child-element--modifier-name { }

We use prefix by scope to associate classes:

# Layout Rules
l-auth
l-app

# State Rules
is-urgent
is-perfect
is-open
is-opportunity

# View Rules
v-dashboard
v-my-insight
v-kpi-management

# Component Rules
c-modal
c-create-kpi
c-update-kpi
c-button

# Popup Rules
p-add-new-member
p-delete-kpi
p-request-an-insight

# Non-styled JavaScript Hooks
js-gridjs-pages
js-search-input
js-current-page