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
