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.
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
Originally published at heybooster.