How to add custom CSS?

Introduction

Monk uses BEM CSS methodology (commonly referred to as BEM) for classes in HTML and CSS. Here’s an example of what a CSS developer writing in the BEM style might write:

/* Block component */
.btn {}

/* Element that depends upon the block */ 
.btn__price {}

/* Modifier that changes the style of the block */
.btn--orange {} 
.btn--big {}

Conventions

All the monk CSS classes will have a prefix of mr

<!-- sample monk element -->
<div class="mr-button"></button>

Always use class or id selector to apply custom CSS. Don’t use :first-child, :last-child, element selectors (span div) or any other selectors.

Each offer layout is made up of well defined class names for each element (with mr- prefix) and also some auto generated names. Please use the class names with mr prfix for applying CSS.

Every widget has a div with a unique id. If a style has to be applied only specific to a particular widget then this id can be used.

What happens if you don’t follow the correct convention to write CSS?
We keep improving monk by adding more features and fixing bugs. This means that the order of the elements might change, so it is possible that the first child is a different element from the one on which the style should be applied. However, the class names would never change. Thus to ensure that the correct CSS styles are applied even after structural changes please ensure that you use the correct convention and class names.

Example and Sample

Example html:

<div id="mr-div-embedded-cp-any-drawer">
   <div>
      <div></div>
      <div class="fZCiTE cZQShK mr-embedded-widget mr-embedded-widget--cross-sell mr-embedded-widget--line-vertical">
         <div class="fsHKzv mr-embedded-widget__offer-header mr-text">People also bought</div>
         </div>
      </div>
   </div>
</div>

Correct convention: If you wish to change font size of the offer header “People also bought” the following CSS can be applied

// correct usage 1: apply to all embedded layout headers
.mr-embedded-widget__offer-header {
 font-size: 24px;
}

//correct usage 2: apply to all embedded cross sell layout headers
.mr-embedded-widget--cross-sell .mr-embedded-widget__offer-header {
 font-size: 24px;
}

//correct usage 3: apply to line vertical embedded cross sell layout headers
.mr-embedded-widget--line-vertical .mr-embedded-widget__offer-header {
 font-size: 24px;
}

Wrong Convention: Avoid using the following CSS

// wrong usage 1
.fsHKzv {
 font-size: 24px;
}

//wrong usage 2
.mr-embedded-widget > div {
 font-size: 24px;
}

//wrong usage 3
.mr-embedded-widget > :first-child {
 font-size: 24px;
}

Updated on: 10/04/2023