CSS Architecture Documentation | Heybooster

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:

• https://philipwalton.com/articles/css-architecture/
• https://gist.github.com/necolas/1309546

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