CSS Architecture Documentation | Heybooster

2 min read
Mustafa Dalga
Apr 29, 2022

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

Latest

From the blog

The latest industry news, interviews, technologies, and resources.
No items found.

Get Top landing pages by session

You don't need worry about performance changes or missing opportunities, in one email, heybooster Google Analytics Weekly Report summarizes all.